我正在开发一个动态的JavaScript应用程序。我有许多带有类的<a>锚元素，当点击这些类时应该触发某些事件。在Firefox、Chrome和IE中，这个功能都能正常工作，但是在移动版Safari（iPad和iPhone）中在某些情况下点击事件不会被触发。
这些元素都具有完全相同的CSS样式，只是它们的位置不同（它们位于不同的容器中）。
我尝试了在此处找到的各种解决方案，但都没有成功。例如：
你有任何其他想法可以帮助我找到解决方案吗？为什么在某些情况下只有点击事件会触发？
在iOS上，由轻触产生的单击事件只有在特定条件下才会像预期的那样冒泡 - 其中之一就是您提到的光标样式。这里有另一个条件：
目标元素或其祖先（但不包括）中的任何一个为任何鼠标事件设置了显式事件处理程序。此事件处理程序可以是空函数。
http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
这是更好的修复方法，可以在不进行浏览器检查的情况下完成。由于“不包括”部分，您必须添加额外的
<body>
<div onclick="void(0);">
<!-- ... all your normal body content ... -->
</div>
</body>
现在，位于该 div 内部的每个点击事件都会像预期的那样在 iOS 中冒泡（这意味着您可以使用 $(document).on('click', '.class', etc...) 捕获它们）。
body { cursor:pointer; }。许多代码将动态元素插入到 body 中，我不想修改它们所有的代码。 - deerchaoonClick={function(){}}使得mouseleave事件能够正确地在我的元素上被调用。这很疯狂，但它起作用了。 - Owen Allen你试过这个吗？这是因为iOS有时不会触发点击事件，只能识别触摸事件。
$(document).on('touchstart click', [Selector], [ Event ]
touchstart事件可以解决问题。然而，这可能不是最佳解决方案，因为即使用户只是试图滚动并将手指放在链接上，动作也会被触发。有没有比使用touchstart更好的方法？ - watt只需声明这些空事件监听器即可。试试看：）
这将使其在所有浏览器上都有效：
container.addEventListener('touchstart', () => {});
container.addEventListener('touchend', () => {});
container.addEventListener('touchcancel', () => {});
container.addEventListener('touchmove', () => {});
移动设备有一个额外的事件。尝试添加tap事件监听器以及click事件。它们可以通过以下方式同时附加:
$(document).on('click tap', [selector], [handler])
对我来说，这个行为是随机的。一切都正常工作，但在一些更改后，某些按钮点击事件的随机问题出现了。
问题出现在某些移动设备上的按钮悬停上（至少对我而言，在Safari上的iOS iPad上），我通过在所有悬停中添加@media hover和指针附加来修复它：
@media (hover: hover) and (pointer: fine) {
.topnav a:hover {
background-color: lightcoral;
}
}
这篇文章帮助我理解了这个问题（即使我这里没有使用React）https://github.com/facebook/react/issues/7635#issuecomment-365089006
刚刚花了一个小时调试另一个疯狂的场景，Safari吞掉了所有的点击，而以上的提示都没有帮助，问题似乎突然出现了。
简而言之：如果基础CSS在悬停时导致回流，冒泡不会到达发生回流的元素。
考虑以下标记：
container
div
span
container.addEventListener('click', MouseClick, false)
span {opacity: 0;}
div:hover {
span {opacity: 1;}
}
当我将其缩小到CSS时，我感到震惊。幸运的是，它昨天被添加到代码库中，并且很容易跟踪，但是哇，为Safari开发真的很糟糕。
window.addEventListener('click', function(event) {
alert("Where's my click?!");
});
我现在已经用一个<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>
height: 100%; 来使整个页面都可以点击，因为我需要这样做。如果你不使用 height: 100%; ，那么点击事件仍然只会在 div 的高度内触发。
-webkit-tap-highlight-color: transparent; 是为了防止 onclick 闪烁叠加样式，因为 iOS 默认情况下会对可点击元素执行此操作。之后的 div 恢复了该 CSS 属性的初始值，以便其他可点击元素在这方面具有正常行为。有关更多信息，请参见 this answer。