如何防止单击功能在双击时运行？答案

【问题标题】：How to prevent click function from running on double click?如何防止单击功能在双击时运行？
【发布时间】：2020-03-05 05:45:08
【问题描述】：

我是 Jquery 和 Javascript 的新手。我希望我的代码在单击文档中的任意位置时播放声音，并在双击 .marker 时播放不同的声音。

它现在可以工作，但是当我双击标记时，它会播放 .click 功能两次以及双击功能。

如何防止.click双击时播放？

这是我的 Jquery 代码：

$(document).ready(function () {

    $(document).click(function () {
        setTimeout(function () {
            let audio = document.createElement("audio");
            audio.src = "audio/click-audio.wav";
            audio.play();
        }, 700);
    });

    $('.marker').dblclick(function () {
        let audio = document.createElement("audio");
        audio.src = "audio/page-audio.wav";
        audio.play();
    });

});

【问题讨论】：

这能回答你的问题吗？ Prevent default single click event on double click on a link in HTML

标签： javascript jquery

【解决方案1】：

只需检查点击的元素是否为.marker：

$(document).click(function(event) { 
      if($(event.target).is(".marker")) return ;
        setTimeout(function() {
            let audio = document.createElement("audio");
            audio.src = "audio/click-audio.wav"; 
            audio.play();}, 700);


    });

【讨论】：

这修复了它。谢谢！

【解决方案2】：

使用事件属性，可以实现

$('marker').click(function(event) {
  if(!event.detail || event.detail == 1){
    // code here.
    // It will execute only once on multiple clicks
  }
});

【讨论】：

【解决方案3】：

stopPropagation() 方法停止将事件冒泡到父元素，防止任何父处理程序收到事件通知。

$(document).click(function () { 
        setTimeout(function() {
            let audio = document.createElement("audio");
            audio.src = "audio/click-audio.wav"; 
            audio.play();}, 700);


    });

    $('.marker').click(function (event) { 
        let audio = document.createElement("audio");
        audio.src = "audio/page-audio.wav"; 
        audio.play(); 
        event.stopPropagation();
    });

});

希望对你有帮助

【讨论】：