javascript Mobile Safari 有时不会触发点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24077725/
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
Mobile Safari sometimes does not trigger the click event
提问by watt
This is a dynamic JavaScript application I am working on. I have many <a>anchor elements that have a class. When that class is clicked, something should happen. This works fine in Firefox, Chrome, IE, but in some casesthe click event is not triggered on mobile Safari (iPad and iPhone).
这是我正在开发的动态 JavaScript 应用程序。我有许多<a>具有类的锚元素。单击该类时，应该会发生一些事情。这在 Firefox、Chrome、IE 中运行良好，但在某些情况下，在移动 Safari（iPad 和 iPhone）上不会触发单击事件。
These elements all have exactly the same CSS, it's just their position that differs (they are in different containers).
这些元素都具有完全相同的 CSS，只是它们的位置不同（它们在不同的容器中）。
I tried various solutions that I found here but with no luck. For instance:
我尝试了在这里找到的各种解决方案，但没有运气。例如：
- setting the cursor to pointer
- the code in this answer
- 将光标设置为指针
- 这个答案中的代码
Do you have any other idea that might help me find a solution to this? Why does the click event triggers only in some cases?
您还有其他想法可以帮助我找到解决方案吗？为什么点击事件只在某些情况下触发？
回答by LinusR
The click event resulting from a tap on iOS will bubble as expected under just certain conditions -- one of which you mentioned, the cursor style. Here is another:
在 iOS 上点击产生的点击事件会在特定条件下按预期冒泡——您提到了其中之一，即光标样式。这是另一个：
The target element, or any of its ancestors up to but not including the
<body>, has an explicit event handler set for any of the mouse events. This event handler may be an empty function.
目标元素或其任何祖先元素（直到但不包括
<body>）具有为任何鼠标事件设置的显式事件处理程序。此事件处理程序可能是一个空函数。
http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
This is much better fix vector, and can be done without a browser check. You do have to add an extra div due to the "not including the <body>" part:
这是更好的修复向量，无需浏览器检查即可完成。由于“不包括<body>”部分，您必须添加额外的 div ：
<body>
<div onclick="void(0);">
<!-- ... all your normal body content ... -->
</div>
</body>
Now every click event originating inside that div will bubble as expected in iOS (meaning you can catch them with $(document).on('click', '.class', etc...)).
现在，源自该 div 内的每个点击事件都将在 iOS 中按预期冒泡（这意味着您可以使用 捕获它们$(document).on('click', '.class', etc...)）。
回答by Gopinath Koothaperumal
Have you tried this?? This is because ios doesn't fire the click event sometimes, only recognizes the touch event
你试过这个吗？？这是因为ios有时不会触发click事件，只识别触摸事件
$(document).on('touchstart click', [Selector], [ Event ]
回答by Yair Kukielka
Just declaring these empty event listeners does the trick. Just try it :)
只需声明这些空事件侦听器即可。去尝试一下 ：）
This will make it work on all browsers:
这将使其适用于所有浏览器：
container.addEventListener('touchstart', () => {});
container.addEventListener('touchend', () => {});
container.addEventListener('touchcancel', () => {});
container.addEventListener('touchmove', () => {});
回答by gitaarik
This is a crazy issue and indeed LinusR's answerand the description on quirksmodeare accurate. My general click event listener didn't work because of this in iOS Safari:
这是一个疯狂的问题，实际上LinusR 的回答和对 quirksmode的描述是准确的。因为在 iOS Safari 中，我的常规点击事件侦听器不起作用：
window.addEventListener('click', function(event) {
alert("Where's my click?!");
});
I now have wrapped my app with a <div onclick="void(0);"></div>and that works. I also added some extra things to fix some issues that came out of it:
我现在已经用 a 包装了我的应用程序，<div onclick="void(0);"></div>并且可以正常工作。我还添加了一些额外的东西来解决一些由此产生的问题：
<div onclick="void(0);" style="height: 100%; -webkit-tap-highlight-color: transparent;">
<div style="height: 100%; -webkit-tap-highlight-color: initial;">
<my-app></my-app>
</div>
</div>
I needed the height: 100%;to make the click available on the whole page because I needed that. If you don't do height: 100%;the click event will still only fire within the height of the div.
我需要height: 100%;使点击在整个页面上可用，因为我需要它。如果你不这样做height: 100%;，点击事件仍然只会在 div 的高度内触发。
The -webkit-tap-highlight-color: transparent;is to prevent an onclick flash overlay style, as iOS does this by default with clickable elements. The div after that restores the initial value of that CSS property, so that other clickable elements do have normal behavior in this regard. See this answerfor more info.
这-webkit-tap-highlight-color: transparent;是为了防止 onclick flash 覆盖样式，因为 iOS 默认使用可点击元素执行此操作。之后的 div 恢复该 CSS 属性的初始值，以便其他可点击元素在这方面确实具有正常行为。有关更多信息，请参阅此答案。
回答by xanobius
There is an additional event for mobile devices. Try to add the tapevent listener in addition to the clickevent. They can be attached simultaneously with the following:
还有一个针对移动设备的额外事件。尝试在tap事件之外添加事件侦听器click。它们可以与以下同时连接：
$(document).on('click tap', [selector], [handler])
