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

Question

这里有点奇怪，我觉得它确实适用于早期的移动浏览器：在Android上的Chrome和iOS上的Safari中，似乎触摸启动事件在点击事件后被解雇 ，而不是之前。这什么时候改变了？

一个简单的例子：

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处理程序添加了一个警告，并且它被解雇以确保它首先被触发并且确实已经触发。

看看touch events mdn article。文章特别提到：

  

在touchstart或系列的第一个touchmove事件上调用preventDefault（）会阻止相应的鼠标事件触发

Click is a mouse event因此它“应该”按预期工作（并且它对我有用）。我会在您的目标浏览器上验证事件确实无序（使用console.log()而不是alert()）。如果它们是完全可能的，不完美的浏览器/规格，尝试使用不同的鼠标事件，如mouseup。我的猜测是，你将能够找到一致的活动。

祝你好运！

Answer 2

您是否尝试过使用mousedown代替click？这样你就可以获得不同的触摸事件和点击而不需要任何双击。您还可能需要使用keydown来保持此网站的可访问性。

Answer 3

物理点击与某些移动浏览器（例如iOS Safari）上的点击事件触发之间有300毫秒的延迟 我遇到了同样的问题，FastClick jQuery插件为我修复了它

看看FastClick