如何解决被触发两次的点击事件？

Posted 2023-05-08

【中文标题】如何解决被触发两次的点击事件？

【英文标题】：How can I trouble shoot click events being triggered twice?

【发布时间】：2012-01-20 01:43:53

【问题描述】：

我有一个单页应用程序。 它使用backbone.js。 通过鼠标触发单击事件一次。 通过触摸设备触发两次点击事件。 取消绑定一键事件在触摸设备上都停止。

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

这是JS：

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

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

谢谢。

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

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

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

感谢大家的帮助。

【问题讨论】：

您是否尝试过删除'click' 或'button' 看看会发生什么？

我试过 .click .bind .live - 它们的行为方式都一样。

查看http://forum.jquery.com/topic/click-event-firing-twice-from-a-touchscreen-device 和http://***.com/questions/3038898/ipad-iphone-hover-problem-causes-the-user-to-double-click-a-link 他们有类似的问题

【参考方案1】：

这可能不是实际的解决方案...只是考虑一下

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

【讨论】：

die in jQuery - 从元素中删除之前使用 .live() 附加的所有事件处理程序。

这个结果是相同的行为。仍然会触发两次，仅在触摸设备上。

【参考方案2】：

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

（假设您使用的是click）

【讨论】：

结果相同。

【参考方案3】：

也许您还为另一个父元素分配了一个点击处理程序。试试这个，以防止点击（或任何其他事件）冒泡 DOM：

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

【讨论】：

Hrrm，好主意，但结果是事件仍然触发了两次。令我困惑的是，这只发生在触摸设备上。如果我不小心绑定了两个事件或创建了同一视图的两个实例，那么鼠标点击也不会发生这种情况吗？

【参考方案4】：

解决问题的第一件事是在 Chrome/IE/Firefox 中使用调试器设置断点，以确保绑定不会发生两次。

或者试试这个：

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

【讨论】：

试过 .off 还是不行。我在 Chrome/IE/Firefox 上没有任何问题，因为它们是鼠标事件。日志只发生一次。

看起来 Dandroid 可能已经在 cmets 中回答了。

【参考方案5】：

您可以使用jquery的one功能代替click来摆脱双击问题。

【讨论】：

但是...我需要能够多次单击该按钮，而不是on 而不是click？

您可以分别设置悬停和点击事件，而不是点击事件。如果触摸设备悬停将在第一次触摸后调用，而其他悬停调用将被调用。

但是 .one() 不是只允许事件被触发一次吗？每次点击后我都必须重新绑定事件？

是的。如果你正在使用一个，你应该每次都重新绑定。