How to prevent click function from running on double click?

Question

I am new to Jquery and Javascript. I want my code to play a sound when clicking anywhere in the document, and a different sound when double clicking on a .marker.

It works right now, but when I double click the marker it plays the .click function twice along with the double click function.

How do I prevent the .click from playing when I double click?

Here is my Jquery code:

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

});

Does this answer your question? [Prevent default single click event on double click on a link in HTML](https://stackoverflow.com/questions/48895168/prevent-default-single-click-event-on-double-click-on-a-link-in-html) — Bhavik Kalariya, Mar 05 '20 at 05:49

score 0 · Answer 1 · answered Mar 05 '20 at 05:51

0

Using event properties, you could achieve

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

answered Mar 05 '20 at 05:51

joy08

7,650
5
32
63

score 0 · Accepted Answer · edited Mar 12 '20 at 04:54

0

Just check whether clicked element is .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);


    });

edited Mar 12 '20 at 04:54

thingEvery

3,324
1
18
25

answered Mar 05 '20 at 05:55

Ritesh Khandekar

3,767
3
13
29

This fixed it. Thank you! – Tanner J. Gohl Mar 05 '20 at 06:01

score 0 · Answer 3 · answered Mar 05 '20 at 06:25

The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.

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

});

hope it will help you

How to prevent click function from running on double click?

3 Answers3