ios - Safari 不触发触摸事件

Question

我有一个小的 jsfiddle - http://jsfiddle.net/qhguktsn/5/ .当您点击链接顶部的文本时(iOS 移动版 Safari)，您只会收到鼠标事件 - 根本没有触摸事件，甚至在 body 上也没有。如果你在文本底部点击它，你会得到触摸事件。我们依靠触摸事件来处理 300 毫秒的延迟。

我们如何获得点击文本顶部和底部的触摸事件？

HTML:

<div style="margin-left:200px;margin-top:200px">
    <a style="vertical-align:center;height: 20px, width: 20px;font-size:100px" href="javascript: void 0">text</a>
</div>

JS:

jQuery("a").on("mousedown", function() { document.body.appendChild(document.createTextNode("mousedown ")); });
jQuery("a").on("mouseup", function() { document.body.appendChild(document.createTextNode("mouseup ")); });
jQuery("a").on("touchstart", function() { document.body.appendChild(document.createTextNode("touchstart ")); });
jQuery("a").on("touchend", function() { document.body.appendChild(document.createTextNode("touchend ")); });
jQuery("a").on("click", function() { document.body.appendChild(document.createTextNode("click ")); });

jQuery(document.body).on("touchstart", function() { document.body.appendChild(document.createTextNode("body touchstart ")); });
jQuery(document.body).on("touchend", function() { document.body.appendChild(document.createTextNode("body touchend ")); });

Answer 1

这是 Mobile Safari 中的已知错误。 https://bugs.webkit.org/show_bug.cgi?id=105406还有另一个从不同的文档添加节点。 https://bugs.webkit.org/show_bug.cgi?id=135628

为了修复它们，有几种方法。

• 第一个是使用名为 fastclick 的小型库，它支持许多移动设备和操作系统。

• 第二个选项是添加event.stopPropagation(); event.preventDefault();像那样。两者你都需要。

  jQuery("a").on("mousedown", function(event) {
      event.stopPropagation();
      event.preventDefault();
      document.body.appendChild(document.createTextNode("mousedown ")); 
  });
  

• 第三个选项是使用像这样的视口(viewport)元标记 <meta name="viewport" content="width=device-width, user-scalable=no"> .这将消除所有触摸延迟，没有任何解决方法。但是，再次在 Safari 上它可能不像在其他浏览器中那样，因为嘿 Safari is the new IE

还有touch-action ，但大多数移动浏览器不支持它。 :(