如何在点击触摸设备时防止"鬼"点击超链接

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上测试了这个.

非常感谢你!

编辑: 触摸必须在元素之外,但仍然在触摸的radiusX/Y内变为单击.click侦听器中clientX/Y和pageX/Y的值不正确,显示对应于该元素的总体坐标,当不是这样时.(http://jsfiddle.net/o8cvqL0L/35)

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

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

Answer 1

尝试一次，我想这会解决你的问题。

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

});

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