javascript - 为什么点击后是touchstart事件？

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")
        }
    });
})

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

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

Answer 1

我在 Android 上通过 Chrome 运行了它，它按您对我的预期运行。我向 touchstart 处理程序添加了一个警报并触发它以确保它首先触发并且它确实触发了。

看看 touch events mdn article .文章特别提到:

calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing

Click is a mouse event所以它“应该”像你期望的那样工作(而且它对我有用)。我会验证事件确实在您的目标浏览器上乱序运行(使用 console.log() 而不是 alert())。如果是，这在浏览器/规范不够完美的情况下完全有可能，请尝试使用不同的鼠标事件，如 mouseup。我的猜测是您将能够找到一个始终如一的 Activity 。

祝你好运!