jquery 移动电话上移动的Safari有时不会触发click事件

gywdnpxw 于 2022-12-12 发布在 jQuery

关注(0)|答案(8)|浏览(233)

这是我正在开发的一个动态JavaScript应用程序。我有很多<a>锚元素都有一个类。当点击该类时，应该会发生一些事情。这在Firefox、Chrome、IE中运行良好，但在某些情况下在移动的Safari（iPad和iPhone）上不会触发click事件。
这些元素都有完全相同的CSS，只是它们的位置不同（它们在不同的容器中）。
我尝试了这里找到的各种解决方案，但没有运气。例如：

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

你有什么其他的想法可以帮助我找到解决这个问题的方法吗？为什么单击事件只在某些情况下触发？

jquery

来源：https://stackoverflow.com/questions/24077725/mobile-safari-sometimes-does-not-trigger-the-click-event

8条答案

按热度按时间

tvokkenx1#

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:
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
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>

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...) ).

赞(0）回复(0）举报 2022-12-12

ocebsuys2#

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

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

赞(0）回复(0）举报 2022-12-12

c86crjj03#

只需声明这些空事件侦听器就可以了。试试看：）
这将使它在所有浏览器上工作：

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

赞(0）回复(0）举报 2022-12-12

5q4ezhmt4#

有一个用于移动的设备的附加事件。除了click事件之外，请尝试添加tap事件侦听器。它们可以与以下内容同时附加：

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

赞(0）回复(0）举报 2022-12-12

guykilcj5#

对我来说，这种行为是随机的。一切都很好，但经过一些变化后，真正随机的问题，激发点击事件的一些按钮发生。
这个问题是一些移动的设备的按钮悬停（至少对我来说是一些带Safari的iOS iPad），我通过在所有悬停中添加@媒体悬停和指针来修复它：

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

这篇文章帮助我弄清楚了这一点（即使我在这里不使用react）https://github.com/facebook/react/issues/7635#issuecomment-365089006

赞(0）回复(0）举报 2022-12-12

xa9qqrwz6#

Just spent an hour debugging another crazy scenario where Safari swallows taps as none of the tips above helped and the issue appeared seemingly out of nowhere.
tl;dr: if underlying CSS causes reflow on hover, bubbling won't reach the element where reflow happens.
Consider the following markup:

container
  div 
    span

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

span {opacity: 0;} 

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

As a result, in mobile Safari on tap the div element won't receive a click event due to the fact that the first tap equals hover-like event and this triggers CSS reflow on the span (which is much smaller than div and is OUTSIDE of tap target coordinates). At the same time, there're other css hover events happening within the same div which does not cause lost clicks.
I was mindblown when narrowed this down to this CSS.. luckily it was added to codebase yesterday and was easy to track down, but holy web, Safari truly sucks to develop for.

赞(0）回复(0）举报 2022-12-12

ergxz8rk7#

这是一个疯狂的问题，事实上LinusR's answer和description on quirksmode是准确的。我的通用点击事件监听器没有工作，因为这在iOS Safari：

window.addEventListener('click', function(event) {
    alert("Where's my click?!");
});

我现在已经用一个<div onclick="void(0);"></div> Package 了我的应用程序，这很好用。我还添加了一些额外的东西来修复它产生的一些问题：

<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 flash覆盖样式，iOS默认对可点击元素执行此操作。后面的div恢复CSS属性的初始值，这样其他可点击元素在这方面就有了正常的行为。更多信息请参见this answer。

赞(0）回复(0）举报 2022-12-12

gajydyqb8#

在我的例子中，按钮有一个:hover/:focus，它具有一个大小可变的属性，如border：3像素。
小尺寸变化足以回流位置并使咔哒声无效。
它发生在移动的上，只是因为空间有限。

赞(0）回复(0）举报 2022-12-12