为什么点击后会出现触摸启动事件

Why is touchstart event after click?

本文关键字：触摸 启动 事件 为什么      更新时间：2023-09-26

这里有一些奇怪的事情，我觉得它肯定在早期的移动浏览器中工作：在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/

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

查看触摸事件 mdn 文章。文章特别提到：

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

Click是一个鼠标事件，所以它"应该"按您的预期工作（它对我有用）。我会验证事件确实在您的目标浏览器上乱序运行（使用 console.log() 而不是 alert()）。如果是，这在浏览器/规格不完美的情况下是完全可能的，请尝试使用不同的鼠标事件，例如 mouseup .我的猜测是，您将能够找到一个始终如一的活动。

祝你好运！

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

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

看看快速点击

相关文章：