如何防止“幽灵”点击触控设备时点击超链接 [英] How to prevent "ghost" clicks on hyperlinks when tapping on touch device

问题描述

当我准确触摸 a 标记元素的边框时，它会触发点击事件，但不会一个 touchstart 事件。为什么会发生这种情况？

When I touch exactly on the border of an a tag element, it triggers a click event, but not a touchstart event. Why is this happening?

为了表明问题我做了这个小提琴： http://jsfiddle.net/o8cvqL0L/8/
a 标签有2个事件：

To show the problem I made this fiddle: http://jsfiddle.net/o8cvqL0L/8/ the a tag has 2 events:

$('#yellow').on('touchstart', function(e) {
    alert('touch');
    e.preventDefault();
});

$('#yellow').on('click', function(e) {
    alert('click');
});

只需触摸黄色元素的边框即可。
有什么办法可以避免这种行为吗？

Just make a touch exactly on the border of the yellow element. Is there any way to avoid this behaviour?

我在Android浏览器，Safari和桌面Chrome上测试了这个。

I tested this on Android Browser, Safari and Desktop Chrome.

非常感谢！

编辑：
触摸必须在元素之外但仍在Touch的radiusX / Y成为一个点击。
单击侦听器中的clientX / Y和pageX / Y的值不正确，显示对应于该元素的总体坐标，但不是这样。 （ http://jsfiddle.net/o8cvqL0L/35 ）

EDITED: The touch must be outside of the element but still within the radiusX/Y of the Touch to become a click. The values of clientX/Y and pageX/Y in the click listener are not right, showing allways coordinates corresponding to the element when it´s not so. (http://jsfiddle.net/o8cvqL0L/35)

拥有 touchstart 侦听器的容器似乎使子元素中的这些奇怪行为消失，并且事件对象中的坐标是正确的。 （ http://jsfiddle.net/o8cvqL0L/42/ ）
然后，使用事件委托修复了这个问题，但是只有当目标元素是 div 而不是像我之前的例子中那样的链接时。这里 div 元素的解决方案： http：// jsfiddle。 net / o8cvqL0L / 44 /

Having a container with touchstart listener seems making that these weird behaviour in the child element disappear, and the coordinates in the event object are right. (http://jsfiddle.net/o8cvqL0L/42/) Then, using event delegation fixes the issue, BUT only when the target element is a div and not a link like in my previous example. Here the solution for div elements: http://jsfiddle.net/o8cvqL0L/44/

我仍在寻找 a 标签的解决方案记录这些问题的原因。

I´m still looking for a solution for a tags and a documented reason for these issue.

推荐答案

在您提供的代码中实际触发了touchstart事件。

The touchstart event is actually fired in the code you provided.

在这个小提琴中 http://jsfiddle.net/mssavai/o8cvqL0L/ 34 / 我修改了原始代码，以显示 #yellow 周围的边框。您会看到触摸边框区域会产生触摸开始。

In this fiddle http://jsfiddle.net/mssavai/o8cvqL0L/34/ I have modified your original code to display a border around #yellow. You'll see that touching the border area generates a touchstart.

然而，触摸边缘附近有时会触发点击，我认为这是您面临的问题。根据我的观察（在谷歌浏览器 - 安卓上），如果触摸在注册区域之外开始，则会发生这种情况，然后当触摸时施加更多压力时，会增长以覆盖该区域的一部分。

However, touching near the edge will sometimes fire a click, which I think is the issue you are facing. From my observation (on Google chrome - android), this occurs if the touch begins outside the registered area, and then grows to cover part of that area when more pressure is exerted as part of the touch.

这篇关于如何防止“幽灵”点击触控设备时点击超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！