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

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上调用preventDefault（）或者系列的第一个touchmove事件会阻止相应的鼠标事件触发

Click是一个鼠标事件，因此它“应该”按预期工作（它对我有效）。 我将验证事件确实在命令浏览器中运行不正常（使用console.log()而不是alert() ）。 如果它们是完全可能的，不完美的浏览器/规格，尝试使用像mouseup一样的不同鼠标事件。 我的猜测是，你将能够找到一致的事件。

祝好运！

Answer 2

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

Answer 3

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

看看FastClick