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

可能是this SO question的副本。

如果您使用的是<a>代码，那么一切都将在iPhone和其他触控设备上正常运行。否则，您应该将CSS添加到样式为cursor: pointer;的任何元素。

Answer 2

鉴于文件片段：

<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);

活动touchstart不适用于iPhone

2 个答案: