Question

这是我正在处理的动态JavaScript应用程序。我有很多<a>个锚元素都有一个类。单击该类时，应该发生一些事情。这在Firefox，Chrome，IE中运行良好，但在某些情况下在移动版Safari（iPad和iPhone）上不会触发点击事件。

这些元素都具有完全相同的CSS，它们的位置不同（它们位于不同的容器中）。

我尝试了各种解决方案，但我没有运气。例如：

将光标设置为指针
代码in this answer

你有什么其他想法可以帮助我找到解决方案吗？为什么click事件仅在某些情况下触发？

谢谢！

Answer 1

点击iOS上的点击事件会在某些情况下按预期冒泡 - 您提到的其中一个是光标样式。这是另一个：

目标元素，或其任何祖先，但不包括 <body>，为任何鼠标设置了显式事件处理程序事件。此事件处理程序可能是一个空函数。

http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

这是更好的修复向量，可以在没有浏览器检查的情况下完成。由于“不包括<body>”部分，您必须添加额外的div：

<body>
  <div onclick="void(0);">
    <!-- ... all your normal body content ... -->
  </div>
</body>

现在，在该div内部发生的每个点击事件都会按预期在iOS中冒泡（这意味着您可以使用$(document).on('click', '.class', etc...)抓住它们。）

Answer 2

你试过这个吗？这是因为ios有时不会触发点击事件，只会识别触摸事件

$(document).on('touchstart click', [Selector], [ Event ]

Answer 3

只需声明这些空事件侦听器即可解决问题。只需尝试：）

这将使其在所有浏览器上均可使用：

container.addEventListener('touchstart', () => {});
container.addEventListener('touchend', () => {});
container.addEventListener('touchcancel', () => {});
container.addEventListener('touchmove', () => {});

Answer 4

移动设备还有其他活动。除了tap事件之外，尝试添加click事件侦听器。它们可以与以下内容同时附加：

$(document).on('click tap', [selector], [handler])

Answer 5

这是一个疯狂的问题，实际上LinusR's answer和description on quirksmode是准确的。因此，我的常规点击事件侦听器无法正常工作，因为在iOS 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%;，则click事件仍只会在div的高度范围内触发。

-webkit-tap-highlight-color: transparent;用于防止onclick Flash覆盖样式，因为iOS默认情况下会使用可点击元素。之后的div将恢复该CSS属性的初始值，以便其他可点击元素在这方面确实具有正常行为。有关更多信息，请参见this answer。

Answer 6

对我来说，这种行为是随机的。一切正常，但经过一些更改后，触发某些按钮的点击事件确实出现了随机问题。

问题是按钮悬停在某些移动设备上（至少对我来说是一些带有 Safari 的 iOS iPad）我通过在所有悬停中添加 @media 悬停和指针来修复它：

@media (hover: hover) and (pointer: fine) {
    .topnav a:hover {
        background-color: lightcoral;
    }
}

这篇文章帮助我解决了这个问题（即使我在这里不使用 react）https://github.com/facebook/react/issues/7635#issuecomment-365089006

Answer 7

刚刚花了一个小时调试了另一个疯狂的场景，其中 Safari 吞下水龙头，因为上述提示都没有帮助，问题似乎无处不在。

tl;dr：如果底层 CSS 在悬停时导致回流，冒泡将不会到达发生回流的元素。

考虑以下标记：

container
  div 
    span

    container.addEventListener('click', MouseClick, false)

span {opacity: 0;} 

div:hover {
    span {opacity: 1;}
 }

因此，在移动 Safari 中，点击 div 元素不会收到 click 事件，因为第一次点击等于悬停事件，这会触发 CSS 重排span（比 div 小得多并且在点击目标坐标之外）。同时，在同一个 div 中还有其他 css 悬停事件发生，不会导致点击丢失。

当我将范围缩小到这个 CSS 时，我大吃一惊。幸运的是，它昨天被添加到代码库中并且很容易追踪，但是神圣的网络，Safari 真的很难开发。

Mobile Safari有时不会触发click事件

7 个答案: