在“点击，点击”事件触发两次。如何避免？

Posted 2023-03-14

【中文标题】在“点击，点击”事件触发两次。如何避免？

【英文标题】：on "tap, click" event firing twice. how to avoid it?

【发布时间】：2015-06-22 22:35:01

【问题描述】：

我正在尝试制作带有区域标签的图像，我可以在其中单击每个区域并显示警报。

同时包含“点击和点击”，我似乎无法弄清楚如何避免在桌面模式下使用鼠标点击两次触发事件。

$(document).ready(function(e) 
    $('img[usemap]').something();

    $('area').on('tap click', function() 
        alert($(this).attr('alt'));
    );
);

我已经搜索了几种方法，例如使用布尔值分隔事件，但它们并没有真正起作用，因为我真的不擅长 javascript...

请帮我解决这个问题。非常感谢！

【问题讨论】：

我做了一个应该重现错误的 jsfiddle，但它没有：jsfiddle.net/s3m3x4ds 我的猜测是你在页面上包含了两次相同的代码，它绑定了两个点击事件相同的元素。

@JohnSparwasser 谢谢！那很有意思。为什么这不火两次，但我的火了：/

您也可以直接取出水龙头，看看是否会出现错误。如果它仍然在没有绑定点击事件的情况下触发了两次事件，你就知道它是重复的代码，或者类似的东西。

@JohnSparwasser 尝试取出“tap”并只留下“click”，它只触发一次而没有任何错误，但“tap click”也不会给我任何错误，它只会触发两次：/我得花更多时间学习 javascript.. 感谢您的帮助！

【参考方案1】：

你可以尝试测试window.ontouchstart，只绑定相关事件

$(document).ready(function(e) 
    $('img[usemap]').something();

    function clickArea()
        alert($(this).attr('alt'));
    

    if(typeof window.ontouchstart === 'undefined')
        $('area').on('click', clickArea);
     else
        $('area').on('touchstart', clickArea);
    
);

【讨论】：

哇，它工作得很好！非常感谢！倒计时后将标记为答案。

这将导致同时具有触摸和点击界面的设备出现问题。见这里：JavaScript touchend versus click dilemma