如何对触发两次的点击事件进行故障排除

How can I trouble shoot click events being triggered twice?

本文关键字：事件 排除 故障 两次      更新时间：2023-09-26
  • 我有一个单页应用程序。
  • 它使用骨干.js。
  • 通过鼠标触发器单击事件一次。
  • 通过触摸设备触发两次单击事件。
  • 取消绑定一键式事件会在触摸设备上停止两个事件。

我不知道从哪里开始寻找。

这是JS：

$('.classy').on('click', 'button', function(){
    console.log('clicked');
})

我需要一些帮助来弄清楚如何解决此问题。我知道我没有提供足够的信息来获得真正的答案。对我来说令人困惑的部分是，这只发生在触摸设备上。如果我不小心绑定了两个事件或创建了同一视图的两个实例，鼠标点击也不会发生吗？

谢谢。

编辑：我尝试通过jQuery Mobile使用tap事件。这有一个奇怪的反应。它会触发事件一次，看起来已经完成，但下次您触摸屏幕上的任意位置时，它会再次触发事件。...奇怪，有什么想法吗？

我终于找到了问题所在。它来自分层的iScrolls。在这一点上，我不得不破解库，这可能是解决此问题的更好方法，但说明了这一点。

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && window.iScrollClickFIX != true) {                        
    window.iScrollClickFIX = true;
    setTimeout(function(){
        window.iScrollClickFIX = false;
    }, 1)

谢谢大家的帮助。

这可能不是实际的解决方案...只是想一想

$('.classy').die('click').on('click', 'button', function(){ 
    console.log('clicked'); 
})

尝试将绑定更改为 mousedown 而不是 click ？

(假设您正在使用click(

也许还有另一个父元素，您还分配了一个单击处理程序。尝试此操作，以防止单击(或任何其他事件(使 DOM 冒泡：

$('.classy').on('click', 'button', function(e){
    console.log('clicked');
    e.stopPropagation();
})

我要做的第一件事是使用 Chrome/IE/Firefox 中的调试器设置一个断点，以确保绑定不会发生两次。

或者试试这个：

$('.classy').off('click').on('click', 'button', function(){
    console.log('clicked');
})

您可以使用jquery的one函数而不是单击来摆脱双击问题。

相关文章：