为什么点击后触摸启动事件？

Question

这有点奇怪,我觉得确实在早期的移动浏览器中工作:在Android上的Chrome和iOS上的Safari中,似乎touchstart事件在点击事件之后被触发,而不是之前.这什么时候改变了？

一个简单的例子:

jQuery(function($) {
    var touched = false;
    $('#clicky').on('touchstart', function(evt){
        touched = true;
        evt.preventDefault();
    })
    .click(function(){
        if (!touched) {
            alert("somehow touch didn't fire")
        }
    });
})

运行这个小提琴,你会看到警告可以在Android和iOS上弹出,它应该实际上永远不会显示!

http://jsfiddle.net/quxnxu7d/2/

Answer 1

我通过Android上的Chrome运行它,它按照您的预期运行.我向touchstart处理程序添加了一个警告,并且它被解雇以确保它首先被触发并且确实已经触发.

看看触摸事件mdn文章.文章特别提到:

在一个touchstart或touchmove一系列的第一个事件上调用preventDefault()可以防止相应的鼠标事件被触发

Click是一个鼠标事件,因此它"应该"按预期工作(它对我有用).我会验证您的目标浏览器上的事件确实无序(使用console.log()而不是alert()).如果它们是完全可能的,不完美的浏览器/规格,尝试使用不同的鼠标事件,如mouseup.我的猜测是,你将能够找到一致的事件.

祝好运!

Answer 2

您是否尝试过使用mousedown而不是click？这样，您应该获得不同的触摸和单击事件，而无需任何双重触发。您可能还需要使用它keydown来保持该网站的可访问性。