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>

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>

• javascript

• 1 Your code does prevent dblclick, but wasn't checking whether it does (I've updated it sow it does). It does not prevent two clicks in rapid succession. – T.J. Crowder Commented Apr 8, 2021 at 9:17
• Right... i want prevent two prevent two clicks in rapid succession – ar099968 Commented Apr 8, 2021 at 9:18
• Have you tried disabling the button via DOM attribute as the first order of business in your function call, and then re-enabling when processing is plete? Also, the onclick and ondblclick should not have () because you want to pass a function there, not what the function returns. What you have will call testClick and testDblClick immediately upon render. – user3832673 Commented Apr 8, 2021 at 9:20
• @user3832673 yes but, I'm searching a "global" solution – ar099968 Commented Apr 8, 2021 at 9:22

2 Answers 2

Your code does prevent dblclick, but wasn't checking whether it does. It does not prevent two clicks 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 remend 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>

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

onclick="setTimeout(testClick, 100)"