Wie vermeidet man (einzelne) Mausklick-Verarbeitung bei Doppelklick im Browser JavaScript?

Question

Wenn der Benutzer double auf eine HTML-Schaltfläche klickt, wird der single Klick-Ereignis-Listener vor dem Doppelklick-Ereignis-Listener aufgerufen.

Gibt es eine Möglichkeit, die Einzelklickverarbeitung mit Doppelklick zu überspringen (ohne durch die Ringe zu springen)?

Denken Sie daran, dass Ich möchte in der Lage sein, auf den einzelnen Klick zu reagieren, wenn der Benutzer nicht doppelt klickt!

Werfen Sie einen Blick auf die selbsterklärenden sample at jsfiddle.net.

myEventButton.addEventListener(
    'click', 
    function(/*e*/) 
    { 
     myClickDiv.innerHTML = 'Clicked.'; // Gets here first on double click. 
    }); 

myEventButton.addEventListener(
    'dblclick', 
    function(/*e*/) 
    { 
     myDblClickDiv.innerHTML = 'Double clicked.'; // Gets here last on double click. 
    }); 

Answer 1

Hier ist a solution

Ich weiß nicht, ob es eine richtige Art und Weise ist, es zu tun, aber das funktioniert. Die Idee besteht darin, einen Zeitgeber zwischen den Klicks zu halten, und Sie können keine schnelleren Klicks verbieten. Dies bedeutet, dass beim ersten Klick der erste Klick registriert wird, der zweite aber ignoriert wird.

Natürlich können Sie dies hinter einer netten Funktion abstrahieren, aber Sie bekommen die Idee.

Ihr modifizierten Code:

// Added variables to store timers 
var minTimeBetweenClicks = 1000; 
var lastClickTime = Date.now(); 

myClearButton.addEventListener(
    'click', 
    function() 
    { 
     myClickDiv.innerHTML = ''; 
     myDblClickDiv.innerHTML = ''; 
    }); 

myEventButton.addEventListener(
    'click', 
    function(/*e*/) 
    { 
     // Check the timer before doing anything 
     if (Date.now() - lastClickTime > minTimeBetweenClicks) { 
     myClickDiv.innerHTML += ' Clicked.'; 
     lastClickTime = Date.now(); 
     } 
    }); 

myEventButton.addEventListener(
    'dblclick', 
    function(/*e*/) 
    { 
     myDblClickDiv.innerHTML = 'Double clicked.'; 
    }); 

PS: Ich änderte auch Ihre Klickcode hinzufügen „geklickt“ auf die Taste, so dass Sie die Doppelklick sehen nicht hinzufügen es zweimal.