如何在触摸设备上点击超链接时避免“幽灵”点击

Question

当我正好触摸到标签元素的边框时，会触发事件，但不会触发事件。为什么会这样？

为了展示问题，我制作了这个fiddle：http://jsfiddle.net/o8cvqL0L/8/。 标签有2个事件：

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

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

只需在黄色元素的边界上轻触一下。 有没有办法避免这种行为？

我在Android浏览器、Safari和桌面Chrome上进行了测试。

非常感谢！

编辑： 触摸必须在元素外部，但仍在Touch的radiusX/Y内才能成为点击。 click监听器中的clientX/Y和pageX/Y值不正确，始终显示与元素对应的坐标，而实际上并非如此。（http://jsfiddle.net/o8cvqL0L/35）

使用带有touchstart监听器的容器似乎可以消除子元素中的这些奇怪行为，并且事件对象中的坐标是正确的。（http://jsfiddle.net/o8cvqL0L/42/） 然后，使用事件委托可以解决问题，但仅当目标元素是div而不是链接，就像在我的先前示例中一样。这里是div元素的解决方案：http://jsfiddle.net/o8cvqL0L/44/

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

- Sadako

---

似乎也会发生在轻微接触元素旁边的情况下。 - Sadako

Answer 1

实际上，您提供的代码已经触发了touchstart事件。

在这个fiddlehttp://jsfiddle.net/mssavai/o8cvqL0L/34/中，我修改了您原始代码以显示#yellow周围的边框。您会发现，触摸边框区域会生成一个touchstart事件。

然而，靠近边缘的触摸有时会触发点击事件，我认为这是您所面临的问题。从我的观察（在Google Chrome-Android上），如果触摸开始于注册区域外部，然后随着触摸施加更大的压力而增长到覆盖该区域的一部分，则会发生这种情况。

- Simon Savai

---

嗨！是的，你说得对，这与触摸区域有关，但我已经在Chrome模拟器中进行了测试，只需起始触摸半径就足以触发点击。 - Sadako

问题是：这种行为有没有被记录在某个地方？我该如何防止这种情况发生。我不希望在轻触时触发点击事件。我已经在问题中添加了一些信息。 - Sadako

Answer 2

试一下这个，我认为这将解决你的问题。

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

});

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

- Pradeepta