Javascript double click event issue

Question

I have a click listener on a DOM element (no jQuery):

element.addEventListener('click', (e) => {
// some code
});

and obviously when I click, the code runs and everything is fine.

The problems is that when I double click, the code runs twice and I don't want this behavior (when I double click I want it to act like a single click and run the code once).

Answer 1

One possibility is to use Date to check to see if the last click that triggered the function proper was less than 1 second ago:

 const element = document.querySelector('div'); let lastClick = 0; element.addEventListener('click', (e) => { const thisClick = Date.now(); if (thisClick - lastClick < 1000) { console.log('quick click detected, returning early'); return; } lastClick = thisClick; console.log('click'); }); 

 <div>click me</div> 

If you want the function proper to run only once the last click was more than 1 second ago (rather than the last function proper run being more than one second ago), change it so that lastClick is assigned to inside the if (thisClick - lastClick < 1000) { conditional:

 const element = document.querySelector('div'); let lastClick = 0; element.addEventListener('click', (e) => { const thisClick = Date.now(); if (thisClick - lastClick < 1000) { console.log('quick click detected, returning early'); lastClick = thisClick; return; } lastClick = thisClick; console.log('click'); }); 

 <div>click me</div> 

Answer 2

you can set value to one of the input and see if the value is changed

 function trigger(){ if(document.getElementById('isClicked').value ==0 ){ console.log('clicked for the first time'); document.getElementById('isClicked').value = 111; setTimeout(function(){ document.getElementById('isClicked').value = 0; }, 1000); } } 

 <button onclick='trigger()'>click me </button> <input type='hidden' value=0 id='isClicked' /> 

Answer 3

debounce the event to trigger in a certain period of time:

 const element = document.querySelector('button'); let time; element.addEventListener('click', (e) => { if (time) { clearTimeout(time); } time = setTimeout(() => console.log('runs after last click'), 500); }); 

 <button>Click!!!</button> 

Answer 4

The most straightforward solution for this is to create a variable that acts as a gate that is reset after a certain time (one second in this example).

 var el = document.querySelector('p'); var clickAllowed = true; el.addEventListener('click', e => { if (!clickAllowed) { return; } clickAllowed = false; setTimeout(() => clickAllowed = true, 1000); // do stuff here console.log('test'); }); 

 <p>Test</p> 

On the first click, your code will run and the "gate" will close to stop a second click. After one second, the "gate" opens to allow the code to run again.

Answer 5

this code working for you

 var el=document.getElementById('demo'); window.clicks=0; // handle two click el.addEventListener('click',function(){ clicks++; el.innerHTML='clicks: '+clicks; setTimeout(function(){ if (clicks == 1) { runYourCode(); clicks=0; } else{ clicks=0; return; } },400); }) // dblclick event el.addEventListener('dblclick',function(){ runYourCode(); }) function runYourCode(){ document.getElementById('text').innerHTML += '<br>Run your Code...'; }; 

 #demo{ background:red; padding:5px 10px; color:white; max-width:100px; } 

 <p id="demo">click me!</p> <p id="text"> log:<br> </p>