问题 点击后为什么触摸启动事件?


这有点奇怪,我确信在早期的移动浏览器中工作:在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/


12663
2018-06-17 02:10


起源

在Firefox中的触摸模拟(开发工具→移动视图→模拟触摸事件)中,它按预期工作。 - Xufox
@Xufox那么它还是另一个webkit-bug?我不会感到惊讶...... - NoBugs
不太确定...我还没有在Firefox for Android或Firefox OS等上测试过它。 - Xufox
不能在FF38上对Chrome 43上的chrome 43进行重新编辑,也不能在ipad mini(ios 8.3)上的Safari上进行重新编辑 - Kaiido
@NoBugs在iPad Mini 3(iOS 8.3)和iPhone 5s(iOS 8.3)上按预期工作 - quirksmode.org/mobile/default.html。 - Sergey Denisov


答案:


我通过Android上的Chrome运行它,它可以按照您的预期运行。我添加了警报 touchstart 处理程序和它被解雇,以确保它首先发射,它确实。

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

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

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

祝你好运!


7
2018-06-24 15:33





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


3
2018-06-23 19:34





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

看一看 FastClick


1
2018-06-29 14:14