Javascript: Disable double click everywhere

Question

I want disable double click everywhere in my application to avoid multiple tipe of issue (eg. double calls to apis).

I have tried to listen all 'dblclick' event on document and stop propagation, but doesn't works, the click are excecuted.

I want prevent two prevent two clicks in rapid succession.

 document.addEventListener('dblclick', (event) => { console.log('click disabled;'). event;preventDefault(). event;stopPropagation(); return false, }; true). function testClick(){ console;log('click reached.'); } function testDblClick() { console.log('dblclick reached!'); }

 <button onclick="testClick()" ondblclick="testDblClick()">Try double click</button>

Answer 1

Your code does prevent dblclick , but wasn't checking whether it does. It does not prevent two click s in rapid succession.

Two answers for you:

Handle it by disallowing overlapping requests

Rather than prevent standard browser behavior, which will be surprising to users trying to use double-click to select words in the page and such, ensure that your code doesn't allow overlapping requests when it shouldn't. For example:

 // Stand-in for something that takes time function doSomethingThatTakesTime() { return new Promise(resolve => setTimeout(resolve, 2000)); } // Code triggered by the button let running = 0; function doOperation() { if (running > 0) { console.log("Call ignored, already running"); return; } ++running; updateUI(); console.log("Started running"); doSomethingThatTakesTime().finally(() => { console.log("Done running"); --running; updateUI(); }); } // Update the UI to match our current state function updateUI() { document.getElementById("btn-start").disabled = running > 0; } // Handle clicks on the button document.getElementById("btn-start").addEventListener("click", doOperation);

 <button id="btn-start">Click to start</button>

Prevent two clicks on same element within X milliseconds

I don't recommend this, but it will prevent the processing of two clicks within X milliseconds on the same element:

 document.getElementById("btn-start").addEventListener("click", function() { console.log("Do the operation"); }); let lastClickElement = null; let lastClickTime = Date.now(); document.addEventListener("click", function(e) { const {target} = e; const now = Date.now(); if (target === lastClickElement && (now - lastClickTime) < 2000) { // Same element and less than two seconds console.log("Second click denied"); e.preventDefault(); e.stopPropagation(); } lastClickElement = target; lastClickTime = now; }, true);

 <button id="btn-start">Start Operation</button>

Answer 2

Because it ran the function testClick() before listen to event dblclick , you can set timeout for function testClick like:

onclick="setTimeout(testClick, 100)"