Wie kann man zwischen Einzelklicks und Doppelklicks auf ein und dasselbe Element unterscheiden?
Wenn Sie sie nicht benötigen , zu mischen, können Sie sich verlassen clickund dblclickund jeder wird gut die Arbeit machen.
Beim Mischen tritt ein Problem auf: Ein dblclickEreignis löst tatsächlich auch ein clickEreignis aus. Sie müssen also feststellen, ob ein einzelner Klick ein "eigenständiger" Einzelklick oder ein Teil eines Doppelklicks ist.
Außerdem: Sie sollten nicht beide clickund dblclickein und dasselbe Element verwenden :
Es ist nicht ratsam, Handler für dasselbe Element an die Ereignisse click und dblclick zu binden. Die Reihenfolge der ausgelösten Ereignisse variiert von Browser zu Browser, wobei einige zwei Klickereignisse vor dem dblclick empfangen und andere nur eines. Die Doppelklickempfindlichkeit (maximale Zeit zwischen Klicks, die als Doppelklick erkannt wird) kann je nach Betriebssystem und Browser variieren und ist häufig vom Benutzer konfigurierbar.
Quelle: https://api.jquery.com/dblclick/
Nun zu den guten Nachrichten:
Mit der detailEigenschaft des Ereignisses können Sie die Anzahl der mit dem Ereignis verbundenen Klicks ermitteln . Dies macht Doppelklicks innerhalb clickziemlich einfach zu erkennen.
Das Problem besteht weiterhin darin, einzelne Klicks zu erkennen und festzustellen, ob sie Teil eines Doppelklicks sind oder nicht. Dafür verwenden wir wieder einen Timer und setTimeout.
Wenn wir alles zusammenfassen, ein Datenattribut verwenden (um eine globale Variable zu vermeiden) und ohne die Klicks selbst zählen zu müssen, erhalten wir:
HTML:
<div class="clickit" style="font-size: 200%; margin: 2em; padding: 0.25em; background: orange;">Double click me</div>
<div id="log" style="background: #efefef;"></div>
JavaScript:
<script>
var clickTimeoutID;
$( document ).ready(function() {
$( '.clickit' ).click( function( event ) {
if ( event.originalEvent.detail === 1 ) {
$( '#log' ).append( '(Event:) Single click event received.<br>' );
/** Is this a true single click or it it a single click that's part of a double click?
* The only way to find out is to wait it for either a specific amount of time or the `dblclick` event.
**/
clickTimeoutID = window.setTimeout(
function() {
$( '#log' ).append( 'USER BEHAVIOR: Single click detected.<br><br>' );
},
500 // how much time users have to perform the second click in a double click -- see accessibility note below.
);
} else if ( event.originalEvent.detail === 2 ) {
$( '#log' ).append( '(Event:) Double click event received.<br>' );
$( '#log' ).append( 'USER BEHAVIOR: Double click detected.<br>' );
window.clearTimeout( clickTimeoutID ); // it's a dblclick, so cancel the single click behavior.
} // triple, quadruple, etc. clicks are ignored.
});
});
</script>
Demo:
JSfiddle
Hinweise zur Barrierefreiheit und Doppelklickgeschwindigkeit:
- Wie Wikipedia es ausdrückt: "Die maximale Verzögerung, die erforderlich ist, damit zwei aufeinanderfolgende Klicks als Doppelklick interpretiert werden, ist nicht standardisiert."
- Keine Möglichkeit, die Doppelklickgeschwindigkeit des Systems im Browser zu erkennen.
- Scheint der Standard ist 500 ms und der Bereich 100-900mm unter Windows ( Quelle )
- Denken Sie an Menschen mit Behinderungen, die in ihren Betriebssystemeinstellungen die Doppelklickgeschwindigkeit auf die langsamste einstellen.
- Wenn die Doppelklickgeschwindigkeit des Systems langsamer als die oben angegebenen 500 ms ist, werden sowohl das Einzelklick- als auch das Doppelklickverhalten ausgelöst.
- Verwenden Sie entweder nicht den kombinierten Einzel- und Doppelklick auf ein und dasselbe Element.
- Oder: Fügen Sie den Optionen eine Einstellung hinzu, um den Wert erhöhen zu können.
Es hat eine Weile gedauert, bis eine zufriedenstellende Lösung gefunden wurde. Ich hoffe, das hilft!