[英]Mobile Safari sometimes does not trigger the click event
这是我正在处理的动态 JavaScript 应用程序。 我有许多具有 class 的<a>锚元素。单击 class 时，应该会发生一些事情。 这在 Firefox、Chrome、IE 中工作正常，但在某些情况下，在移动设备 Safari（iPad 和 iPhone）上不会触发点击事件。
这些元素都具有完全相同的 CSS，只是它们的 position 不同（它们在不同的容器中）。
我尝试了在这里找到的各种解决方案，但没有成功。 例如：
您还有其他想法可以帮助我找到解决方案吗？ 为什么点击事件只在某些情况下触发？
在 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...)捕获它们）。
你试过这个吗？？ 这是因为ios有时不会触发click事件，只识别触摸事件
$(document).on('touchstart click', [Selector], [ Event ]
只需声明这些空事件侦听器即可。 就试一试吧 ：）
这将使其适用于所有浏览器：
container.addEventListener('touchstart', () => {});
container.addEventListener('touchend', () => {});
container.addEventListener('touchcancel', () => {});
container.addEventListener('touchmove', () => {});
还有一个针对移动设备的额外事件。 除了click事件之外，尝试添加tap事件侦听器。 它们可以与以下同时连接：
$(document).on('click tap', [selector], [handler])
这是一个疯狂的问题，实际上LinusR 的回答和对 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 属性的初始值，以便其他可点击元素在这方面确实具有正常行为。 有关更多信息，请参阅此答案。
对我来说，这种行为是随机的。 一切正常，但经过一些更改后，触发某些按钮的点击事件确实出现了随机问题。
问题是按钮悬停在某些移动设备上（至少一些带有 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
刚刚花了一个小时调试另一个疯狂的场景，其中 Safari 吞下水龙头，因为上述提示都没有帮助，问题似乎无处不在。
tl; dr：如果底层 CSS 在悬停时导致回流，冒泡将不会到达回流发生的元素。
考虑以下标记：
container
div
span
container.addEventListener('click', MouseClick, false)
span {opacity: 0;}
div:hover {
span {opacity: 1;}
}
因此，在移动 Safari 中，点击div元素不会收到click事件，因为第一次点击等于悬停事件，这会触发span上的 CSS 重排（比 div 小得多，并且是 OUTSIDE点目标坐标）。 同时，在同一个 div 中还有其他 css 悬停事件发生，这不会导致点击次数丢失。
当我把它缩小到这个 CSS 时，我感到很震惊。幸运的是，它昨天被添加到代码库中并且很容易追踪，但是神圣的网络，Safari 真的很糟糕开发。
在我的例子中，按钮有一个:hover/:focus和一个大小变化的属性，比如 border: 3px。
小尺寸变化足以回流 position 并使点击无效。
它发生在手机上只是因为空间有限。
iOS 9 上的 Safari 不会触发隐藏输入文件的点击事件
[英]Safari on iOS 9 does not trigger click event on hidden input file
对于某些HTML内容，Click事件在safari mobile中不起作用
[英]Click event doesnt work in safari mobile for some HTML content
绑定到touchstart事件，导致自动对焦关注Mobile Safari中的任何点击
[英]Binding to a touchstart event causing autofocus to focus on any click in Mobile Safari
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.