Safari 不触发触摸事件答案

【问题标题】：Safari not firing touch eventsSafari 不触发触摸事件
【发布时间】：2015-11-06 05:36:08
【问题描述】：

我有一个小 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 ")); });

【问题讨论】：

我想我在 iOS 8.1.2 和 Chrome 上可能有同样的事情。
Chrome 使用与 iOS 上的 Safari 相同的渲染引擎，因此行为应该是相同的（就像在 iOS 上运行的所有其他浏览器一样）。
我一直在努力找出为什么我的小按钮上的触摸事件没有持续触发，您的帖子帮助我理解这是一个边缘问题！只要您在任何边缘（包括左边缘和右边缘）太靠近点击，触摸事件就不会触发，但点击事件仍然会触发。
Android 上的 Chrome 也有同样的问题。
使用 jQuery Mobile 'tap' 事件进行了测试。即使触摸开始没有，“点击”事件似乎也会在边缘触发。不知道为什么。可能需要探索。

标签： ios mobile-safari

【解决方案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 ")); 
});

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

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

【讨论】：

我不太相信这个错误，因为我们会遇到不同的行为，具体取决于您点击按钮的位置。而且您列出的修复程序并不真正适用。 Fastclick 仅与我们所做的相同，我真的不确定取消鼠标事件会如何使前面的触摸事件神奇地出现，并且您所说的第三个选项不适用于 Safari 所以我真的看不到相关性。
很抱歉，我不能提供更多帮助。目前我没有更多的想法。
顺便说一句，请查看本文底部的链接。 stackoverflow.com/a/4165641/2855530

【解决方案2】：

body 上的触摸事件是由于 body 元素向下移动了 margin-top，在 body 元素上放置一个轮廓来勾勒触摸目标：

body { outline: 1px solid red; }

http://jsfiddle.net/qhguktsn/11/

谜团的第二部分似乎是点击目标在触摸目标之外展开：

触摸红色轮廓不会触发 body 元素上的触摸事件，但是当在锚点本身扩展的灰色 -webkit-tap-highlight-color 区域内的任意位置点击时似乎会触发单击事件。因此，点击顶部会触发锚点上的点击事件，但不会触发主体上的触摸事件。

【讨论】：

这里的主要问题是受影响的区域太小 - 在实际测试中，顶部有一个明显更大的带显示问题。
似乎浏览器对点击的解释总是比用户认为他们点击的要高得多，所以在这两个问题之间，可能是这样。
@Douglas 感谢您揭示了这个谜团。这个问题有解决办法吗？

【解决方案3】：

我发现当单击位置包含的元素时不会触发触摸事件：超出窗口的固定元素。我通过缩短父容器来处理这个问题（使用 JS 来获取确切的窗口高度）。

这个问题出现在使用 iOS 10 的应用 UIWebview 中。（是的，仍在使用 UIWebview）

【讨论】：