事件触摸启动在 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>

匿名事件处理函数的默认作用域绑定到被单击的元素，而不是被单击的元素的父元素，这是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);

Answer 2

可能是这个问题的重复。

如果你使用的是<a>标签，那么在iphone和其他触控设备上，一切都将按预期工作。否则，您应该为样式为cursor: pointer;的元素添加CSS。