Element: click-Ereignis
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Ein Element empfängt ein click-Ereignis, wenn einer der folgenden Fälle eintritt:
- Eine Taste eines Zeigegeräts (etwa die primäre Maustaste) wird gedrückt und wieder losgelassen, während sich der Zeiger innerhalb des Elements befindet.
- Auf dem Element wird eine Berührungsgeste ausgeführt.
- Eine Benutzerinteraktion entspricht einem Klick, etwa das Drücken der Leertaste oder der Eingabetaste, während das Element fokussiert ist. Dies gilt nur für Elemente mit einem standardmäßigen Handler für Tastaturereignisse. Elemente, die durch Setzen des Attributs
tabindexfokussierbar gemacht wurden, sind daher ausgeschlossen.
Wenn die Taste auf einem Element gedrückt und der Zeiger vor dem Loslassen aus dem Element herausbewegt wird, wird das Ereignis auf dem spezifischsten übergeordneten Element ausgelöst, das beide Elemente enthält.
click wird ausgelöst, nachdem die Ereignisse mousedown und mouseup in dieser Reihenfolge ausgelöst wurden.
Das Ereignis ist geräteunabhängig. Es kann durch Berührung, Tastatur, Maus und andere von assistiven Technologien bereitgestellte Mechanismen ausgelöst werden.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("click", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onclick = (event) => { }
Ereignistyp
Ein PointerEvent. Es erbt von MouseEvent.
Hinweis:
In früheren Versionen der Spezifikation war der Ereignistyp dieses Ereignisses ein MouseEvent. Weitere Informationen finden Sie unter Browser-Kompatibilität.
Verwendungshinweise
Die Eigenschaft detail des PointerEvent-Objekts, das an den Event-Handler für click übergeben wird, enthält die Anzahl der Klicks auf das target. Bei einem Doppelklick hat detail also den Wert 2, bei einem Dreifachklick den Wert 3 und so weiter. Dieser Zähler wird zurückgesetzt, wenn für kurze Zeit keine Klicks erfolgen. Die genaue Dauer dieses Zeitraums kann je nach Browser und Plattform variieren. Sie wird wahrscheinlich auch von den Benutzereinstellungen beeinflusst: Barrierefreiheitsoptionen können den Zeitraum beispielsweise verlängern, damit sich mehrere Klicks mit adaptiven Eingabegeräten leichter ausführen lassen.
Beispiele
Dieses Beispiel zeigt die Anzahl aufeinanderfolgender Klicks auf ein <button> an.
HTML
<button>Click</button>
JavaScript
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
button.textContent = `Click count: ${event.detail}`;
});
Ergebnis
Klicken Sie mehrmals schnell hintereinander auf die Schaltfläche, um die Anzahl zu erhöhen. Wenn Sie zwischen den Klicks eine Pause machen, wird der Zähler zurückgesetzt.
Spezifikationen
| Spezifikation |
|---|
| Pointer Events # click |
| HTML # handler-onclick |