Mobile Safari有时不会触发click事件

wat*_*att 13 javascript css jquery mobile-safari dom-events

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

这些元素都具有完全相同的CSS,只是它们的位置不同(它们位于不同的容器中).

我尝试了各种解决方案,但我没有运气.例如:

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

谢谢!

Lin*_*usR 23

点击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>
Run Code Online (Sandbox Code Playgroud)

现在,来自该div内部的每个点击事件都会按预期在iOS中冒泡(意味着您可以抓住它们$(document).on('click', '.class', etc...)).

  • 我选择`body {cursor:pointer; }`.许多代码将动态元素插入`body`,我不想全部修改它们. (3认同)

小智 7

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

$(document).on('touchstart click', [Selector], [ Event ]
Run Code Online (Sandbox Code Playgroud)

  • 谢谢.似乎添加touchstart事件是有效的.但是,它可能不是最好的解决方案,因为即使用户只是尝试滚动并开始将手指放在该链接上,动作也会被触发.有没有比使用`touchstart`更好的方法? (6认同)

Yai*_*lka 6

只需声明这些空事件侦听器即可。就试一试吧 :)

这将使其适用于所有浏览器:

container.addEventListener('touchstart', () => {});
container.addEventListener('touchend', () => {});
container.addEventListener('touchcancel', () => {});
container.addEventListener('touchmove', () => {});
Run Code Online (Sandbox Code Playgroud)

  • 有趣的。你能解释一下为什么会这样吗?因为效果好! (3认同)