Element: click event
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 eines der folgenden Ereignisse eintritt:
- Eine Zeigegeräte-Taste (wie die Primärtaste einer Maus) wird sowohl gedrückt als auch losgelassen, während der Zeiger sich innerhalb des Elements befindet.
- Eine Berührungsgeste wird auf dem Element ausgeführt.
- Jede Benutzerinteraktion, die einem Klick entspricht, wie das Drücken der Space- oder Enter-Taste, während das Element fokussiert ist. Beachten Sie, dass dies nur für Elemente mit einem Standard-Tastaturereignis-Handler gilt und daher andere Elemente ausschließt, die durch das Setzen des
tabindex-Attributs Fokus erhalten haben.
Wird die Taste auf einem Element gedrückt und der Zeiger bewegt sich außerhalb des Elements, bevor die Taste losgelassen wird, wird das Ereignis auf dem spezifischsten übergeordneten Element ausgelöst, das beide Elemente enthielt.
click wird in der Reihenfolge ausgelöst, nachdem sowohl das mousedown als auch das mouseup Ereignis ausgelöst wurden.
Das Ereignis ist ein geräteunabhängiges Ereignis – es kann durch Berührung, Tastatur, Maus und jedes andere von unterstützender Technologie bereitgestellte Mechanismus aktiviert werden.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Property.
addEventListener("click", (event) => { })
onclick = (event) => { }
Ereignistyp
Ein PointerEvent. Erbt von MouseEvent.
Hinweis:
In früheren Versionen der Spezifikation war der Ereignistyp für dieses Ereignis ein MouseEvent. Überprüfen Sie die Browser-Kompatibilität für weitere Informationen.
Verwendungshinweise
Das PointerEvent-Objekt, das in den Ereignis-Handler für click übergeben wird, hat seine detail-Eigenschaft auf die Anzahl der Male gesetzt, die das target angeklickt wurde. Mit anderen Worten, detail wird für einen Doppelklick 2, für einen Dreifachklick 3 und so weiter sein. Dieser Zähler wird nach einem kurzen Intervall ohne Klicks zurückgesetzt; die Details, wie lange dieses Intervall ist, können von Browser zu Browser und über Plattformen hinweg variieren. Das Intervall wird wahrscheinlich auch von Benutzereinstellungen beeinflusst; zum Beispiel können Barrierefreiheitsoptionen dieses Intervall verlängern, um es einfacher zu machen, mehrere Klicks mit adaptiven Schnittstellen auszuführen.
Beispiele
Dieses Beispiel zeigt die Anzahl der aufeinanderfolgenden Klicks auf eine <button>.
HTML
<button>Click</button>
JavaScript
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
button.textContent = `Click count: ${event.detail}`;
});
Ergebnis
Versuchen Sie, schnelle, wiederholte Klicks auf den Button zu machen, um die Klickanzahl zu erhöhen. Wenn Sie eine Pause zwischen den Klicks machen, wird der Zähler zurückgesetzt.
Spezifikationen
| Spezifikation |
|---|
| Pointer Events # click |
| HTML # handler-onclick |