如何防止單擊功能在雙擊時運行？

Question

我是 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();
    });

});

Answer 1

使用事件屬性，您可以實現

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

Answer 2

只需檢查單擊的元素是否為.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);


    });

Answer 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();
    });

});

希望它會幫助你