ios Safari 不触发触摸事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31985051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Safari not firing touch events
提问by Puppy
I've got a small jsfiddle - http://jsfiddle.net/qhguktsn/5/. When you tap the text at the top of the link (iOS mobile Safari), you get only the mouse events- no touch events at all, not even on the body. If you tap it on the bottom of the text, you get touch events. We depend on touch events for handling 300ms delay.
我有一个小的 jsfiddle - http://jsfiddle.net/qhguktsn/5/。当您点击链接顶部的文本（iOS 移动 Safari）时，您只会获得鼠标事件 - 根本没有触摸事件，甚至在身体上也没有。如果你在文本底部点击它，你会得到触摸事件。我们依靠触摸事件来处理 300 毫秒的延迟。
How can we get touch events for tapping on the top of the text as well as the bottom?
我们如何获得点击文本顶部和底部的触摸事件？
HTML:
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:
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 ")); });
采纳答案by Douglas
The touch events on the body are due to the body element being shifted down by the margin-top, putting an outline on the body element outlines the touch-target:
body 上的触摸事件是由于 body 元素被 margin-top 向下移动，在 body 元素上放置一个轮廓勾勒出触摸目标：
body { outline: 1px solid red; }
http://jsfiddle.net/qhguktsn/11/
http://jsfiddle.net/qhguktsn/11/
The second part of the mystery seems to be that the click target expands outside the touch-target:
神秘的第二部分似乎是点击目标扩展到触摸目标之外：
Touching the red outline will not trigger a touch event on the body element, but the click event seems to fire when tapped anywhere within the grey -webkit-tap-highlight-colorregion which expands outside the anchor itself. Taps at the very top will therefore trigger click events on the anchor, but not touch events on the body.
触摸红色轮廓不会触发 body 元素上的触摸事件，但是当点击-webkit-tap-highlight-color扩展到锚点之外的灰色区域内的任何位置时，点击事件似乎会触发。因此，最顶部的点击将触发锚点上的点击事件，但不会触发身体上的触摸事件。
回答by Stanimir Dimitrov
This is know bug in Mobile Safari. https://bugs.webkit.org/show_bug.cgi?id=105406There is another one as well with adding node form different document. https://bugs.webkit.org/show_bug.cgi?id=135628
这是 Mobile Safari 中的已知错误。https://bugs.webkit.org/show_bug.cgi?id=105406还有另一种方法是在不同的文档中添加节点。https://bugs.webkit.org/show_bug.cgi?id=135628
In order to fix them there are several ways.
为了修复它们，有几种方法。
The first one is to use a small library called fastclick, which supports many mobile devices and OS.
The second options is to add
event.stopPropagation(); event.preventDefault();like that. You need both of them.jQuery("a").on("mousedown", function(event) { event.stopPropagation(); event.preventDefault(); document.body.appendChild(document.createTextNode("mousedown ")); });The third option is by using the viewport meta tag like that
<meta name="viewport" content="width=device-width, user-scalable=no">. This will eliminate all touch delays, without any workarounds. But, again on Safari it may not act like in the other browsers, because hey Safari is the new IE
第一个是使用一个名为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 是新的 IE
There is also touch-action, but it's not supported in most of the mobile browsers. :(
还有touch-action，但它在大多数移动浏览器中不受支持。:(
回答by user984003
I found that the touch event is not fired when clicking on an element contained by a position:fixed element that extends beyond the window. I handled this by making the parent container shorter (used JS to get the exact window height).
我发现在单击由位置包含的元素时不会触发触摸事件：超出窗口的固定元素。我通过缩短父容器来处理这个问题（使用 JS 来获得确切的窗口高度）。
This problem was in an app UIWebview using iOS 10. (Yes, still using UIWebview)
此问题出现在使用 iOS 10 的应用程序 UIWebview 中。（是的，仍在使用 UIWebview）
