Question

当我完全触摸a标记元素的边框时，会触发click事件，但不会触发touchstart事件。为什么会这样？

为了表明问题我做了这个小提琴：http://jsfiddle.net/o8cvqL0L/8/ a标记有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标签的解决方案以及这些问题的记录原因。

Answer 1

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

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

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

Answer 2

尝试一次，我认为这将解决您的问题。

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

});

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

如何预防＆＃34;鬼＆＃34;点击触控设备时点击超链接

2 个答案: