移动Safari有时不触发点击事件 [英] Mobile Safari sometimes does not trigger the click event
问题描述
这是我正在开发的动态JavaScript应用程序.我有许多具有类的<a>锚元素.单击该类时，应该会发生一些事情.在Firefox，Chrome，IE上可以正常运行，但是在某些情况下，点击事件不会在移动Safari(iPad和iPhone)上触发.
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 cases the click event is not triggered on mobile Safari (iPad and iPhone).
这些元素都具有完全相同的CSS，只是它们的位置不同(它们在不同的容器中).
These elements all have exactly the same CSS, it's just their position that differs (they are in different containers).
我尝试了在这里找到的各种解决方案，但是没有运气.例如:
I tried various solutions that I found here but with no luck. For instance:
您还有其他想法可以帮助我找到解决方案吗?为什么点击事件仅在某些情况下会触发?
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?
推荐答案
在某些情况下，iOS上的点击导致的click事件将按预期起泡-您提到的其中一种是光标样式.这是另一个:
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:
目标元素或其任何祖先，但不包括
<body>，为任何鼠标设置了显式事件处理程序 事件.此事件处理程序可能是空函数.
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.
http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
这是更好的修复程序，无需浏览器即可完成.由于不包括<body>"部分，您必须添加一个额外的div:
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 onclick="void(0);">
<!-- ... all your normal body content ... -->
</div>
</body>
现在，该div中发起的每个click事件都将在iOS中按预期方式冒泡(这意味着您可以使用$(document).on('click', '.class', etc...)捕获它们).
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...)).
这篇关于移动Safari有时不触发点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
