Element: click event

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Ein Element erhält ein click-Ereignis, wenn eines der folgenden Ereignisse eintritt:

Eine Taste eines Zeigegeräts (wie die Primärtaste einer Maus) wird gedrückt und losgelassen, während sich der Zeiger innerhalb des Elements befindet.
Eine Touch-Geste wird auf dem Element ausgeführt.
Jede Benutzerinteraktion, die einem Klick entspricht, wie das Drücken der Leertaste oder der Eingabe-Taste, während das Element fokussiert ist. Beachten Sie, dass dies nur für Elemente mit einem Standardtastenereignishandler gilt und daher andere Elemente ausschließt, die durch das Setzen des tabindex-Attributs fokussierbar gemacht wurden.

Wenn die Taste auf einem Element gedrückt wird und der Zeiger aus dem Element bewegt wird, bevor die Taste losgelassen wird, wird das Ereignis auf dem spezifischsten übergeordneten Element ausgelöst, das beide Elemente enthielt.

click wird ausgelöst, nachdem sowohl das mousedown- als auch das mouseup-Ereignis in dieser Reihenfolge ausgelöst wurden.

Das Ereignis ist ein geräteunabhängiges Ereignis – das heißt, es kann durch Berührung, Tastatur, Maus und jede andere von Hilfstechnologien bereitgestellte Mechanik aktiviert werden.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandlereigenschaft.

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.

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Schreibgeschützt Experimentell: Stellt den Winkel zwischen einer Wandlerachse (einem Zeiger oder Stylus) und der X-Y-Ebene eines Gerätescreens dar.
PointerEvent.azimuthAngle Schreibgeschützt Experimentell: Stellt den Winkel zwischen der Y-Z-Ebene und der Ebene dar, die sowohl die Wandlerachse (ein Zeiger oder Stylus) als auch die Y-Achse enthält.
PointerEvent.pointerId Schreibgeschützt: Eine eindeutige Kennung für den Zeiger, der das Ereignis verursacht.
PointerEvent.width Schreibgeschützt: Die Breite (Magnitude auf der X-Achse) in CSS-Pixeln der Kontaktgeometrie des Zeigers.
PointerEvent.height Schreibgeschützt: Die Höhe (Magnitude auf der Y-Achse) in CSS-Pixeln der Kontaktgeometrie des Zeigers.
PointerEvent.pressure Schreibgeschützt: Der normalisierte Druck der Zeigereingabe im Bereich von 0 bis 1, wobei 0 und 1 den minimalen und maximalen Druck darstellen, den die Hardware erkennen kann.
PointerEvent.tangentialPressure Schreibgeschützt: Der normalisierte tangentiale Druck der Zeigereingabe (auch bekannt als Barrel-Druck oder Zylinderbelastung) im Bereich von -1 bis 1, wobei 0 die Neutralposition der Steuerung darstellt.
PointerEvent.tiltX Schreibgeschützt: Der Planwinkel (in Grad, im Bereich von -90 bis 90) zwischen der Y-Z-Ebene und der Ebene, die sowohl die Zeigerachse (z. B. eines Stifts) als auch die Y-Achse enthält.
PointerEvent.tiltY Schreibgeschützt: Der Planwinkel (in Grad, im Bereich von -90 bis 90) zwischen der X-Z-Ebene und der Ebene, die sowohl die Zeigerachse (z. B. eines Stifts) als auch die X-Achse enthält.
PointerEvent.twist Schreibgeschützt: Die Drehung im Uhrzeigersinn des Zeigers (z. B. eines Stifts) um seine Hauptachse in Grad, mit einem Wert im Bereich von 0 bis 359.
PointerEvent.pointerType Schreibgeschützt: Gibt den Gerätetyp an, der das Ereignis verursacht hat (Maus, Stift, Berührung, etc.).
PointerEvent.isPrimary Schreibgeschützt: Gibt an, ob der Zeiger den primären Zeiger dieses Zeigertyps darstellt.

Nutzungshinweise

Das PointerEvent-Objekt, das an den Ereignishandler für click übergeben wird, hat seine detail-Eigenschaft auf die Anzahl der Male gesetzt, die das target angeklickt wurde. Mit anderen Worten, detail ist 2 bei einem Doppelklick, 3 bei einem Dreifachklick usw. Dieser Zähler wird nach einer kurzen Zeit ohne Klicks zurückgesetzt; die genauen Details, wie lange dieses Intervall ist, können von Browser zu Browser und zwischen den Plattformen variieren. Das Intervall wird wahrscheinlich auch von Benutzerpräferenzen beeinflusst; zum Beispiel können Barrierefreiheitsoptionen dieses Intervall verlängern, um es einfacher zu machen, mit adaptiven Schnittstellen mehrere Klicks auszuführen.

Beispiele

Dieses Beispiel zeigt die Anzahl der aufeinanderfolgenden Klicks auf einen <button> an.

HTML

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 Klickzählung zu erhöhen. Wenn Sie eine Pause zwischen den Klicks einlegen, wird die Zählung zurückgesetzt.

Spezifikationen

Specification
UI Events # event-type-click
HTML # handler-onclick