Question

我有一个小小的jsfiddle - http://jsfiddle.net/qhguktsn/5/。当您点击链接顶部的文本（iOS移动版Safari）时，您只会获得鼠标事件 - 根本没有触摸事件，甚至在身体上也没有。如果您点击文本底部的它，您将获得触摸事件。我们依靠触摸事件来处理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 ")); 
});

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

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

Answer 2

身体上的触摸事件是由于身体元素被边缘顶部向下移动，在身体元素上勾勒出触摸目标的轮廓：

body { outline: 1px solid red; }

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

神秘的第二部分似乎是点击目标扩展到触摸目标之外：

触摸红色轮廓不会触发body元素上的触摸事件，但点击事件似乎在点击灰色-webkit-tap-highlight-color区域内的任何位置时触发，该区域扩展到锚点本身之外。因此，最顶部的点击将触发锚点上的点击事件，但不会触摸身体上的事件。

Answer 3

我发现当点击一个位于窗口之外的position：fixed元素所包含的元素时，不会触发touch事件。我通过缩短父容器来处理这个问题（使用JS来获得确切的窗口高度）。

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

Safari没有触发触摸事件

3 个答案: