javascript - 事件 touchstart 在 iPhone 上不起作用

Question

我有一些代码可以正常工作，但在 iPhone 上除外。当窗口加载时，调用此函数。当我将事件作为 click 时，它在桌面上工作得很好，但在移动设备上却不行。我尝试四处寻找移动解决方案，touchstart 似乎是推荐的解决方案。但是，虽然它适用于模拟器，但它不适用于 iPhone(在最新的操作系统版本上测试)。我错过了什么吗？

function addXClassOnClick() {
  var els = document.getElementsByClassName('item');

  Array.prototype.forEach.call(els, function(el) {
    el.addEventListener('touchstart', function() {
      el.parentElement.classList.toggle('x');
    }, false);
  });
}

提前致谢!

Answer 1

给定文档片段:

<div class="x">
    <div class="item">Item</div>
</div>

匿名事件处理函数的默认范围绑定(bind)到被点击的元素，而不是被点击的元素的父级，这是 classList.toggle 应该操作的范围。

(编辑:根据文档，forEach 在未指定时将 undefined 作为回调函数的范围传入。DOM 元素引用 el 没有操作范围。就像 DOM 在那里，但范围链不在。)

要解决此问题，请使用正确的范围调用 classList.toggle:

el.parentElement.classList.toggle.call(el.parentElement.classList, 'x');

或调用 forEach 并将所需范围作为第二个参数:

Array.prototype.forEach.call(els, function(el) {
    // omit
}, els);