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 Zeigegerätetaste (wie die Primärtaste einer Maus) wird gedrückt und wieder losgelassen, während der Zeiger sich innerhalb des Elements befindet.
Eine Touch-Geste wird auf dem Element ausgeführt.
Jede Benutzerinteraktion, die einem Klick entspricht, wie das Drücken der Taste Space oder Enter, während das Element fokussiert ist. Beachten Sie, dass dies nur für Elemente mit einem standardmäßigen Tastenereignishandler gilt und daher andere Elemente ausschließt, die durch Setzen des tabindex-Attributes 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 Vorfahrenselement ausgelöst, das beide Elemente enthält.

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

Das Ereignis ist ein geräteunabhängiges Ereignis — das bedeutet, es kann durch Berührung, Tastatur, Maus und andere Mechanismen aktiviert werden, die von unterstützender Technologie bereitgestellt werden.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

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: Repräsentiert den Winkel zwischen der Achse eines Transducers (einem Zeiger oder Stylus) und der X-Y-Ebene eines Geräteschirms.
PointerEvent.azimuthAngle Schreibgeschützt Experimentell: Repräsentiert den Winkel zwischen der Y-Z-Ebene und der Ebene, die sowohl die Achse des Transducers (ein Zeiger oder Stylus) als auch die Y-Achse enthält.
PointerEvent.pointerId Schreibgeschützt: Eine eindeutige Kennung für den den Ereignis verursachenden Zeiger.
PointerEvent.width Schreibgeschützt: Die Breite (Größe auf der X-Achse) in CSS-Pixeln der Kontaktgeometrie des Zeigers.
PointerEvent.height Schreibgeschützt: Die Höhe (Größe auf der Y-Achse) in CSS-Pixeln der Kontaktgeometrie des Zeigers.
PointerEvent.pressure Schreibgeschützt: Der normalisierte Druck des Zeigereingaben in der Spanne von 0 bis 1, wobei 0 und 1 den minimalen und maximalen Druck darstellen, den die Hardware zu erkennen in der Lage ist.
PointerEvent.tangentialPressure Schreibgeschützt: Der normalisierte tangentiale Druck des Zeigereingaben (auch als Barrel-Druck oder Zylinder-Spannung bekannt) im Bereich von -1 bis 1, wobei 0 die neutrale Position der Steuerung ist.
PointerEvent.tiltX Schreibgeschützt: Der Ebenenwinkel (in Grad, im Bereich von -90 bis 90) zwischen der Y–Z-Ebene und der Ebene, die sowohl die Achse des Zeigers (z.B. eines Stift-Stylus) als auch die Y-Achse enthält.
PointerEvent.tiltY Schreibgeschützt: Der Ebenenwinkel (in Grad, im Bereich von -90 bis 90) zwischen der X–Z-Ebene und der Ebene, die sowohl die Achse des Zeigers (z.B. eines Stift-Stylus) als auch die X-Achse enthält.
PointerEvent.twist Schreibgeschützt: Die im Uhrzeigersinn gemessene Drehung des Zeigers (z.B. eines Stift-Stylus) 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.

Verwendungshinweise

Das PointerEvent-Objekt, welches an den Ereignishandler für click übergeben wird, hat seine detail-Eigenschaft auf die Anzahl der Klicks auf das target gesetzt. Mit anderen Worten, detail ist 2 für einen Doppelklick, 3 für einen Dreifachklick und so weiter. Dieser Zähler wird nach einer kurzen Pause ohne Klicks zurückgesetzt; die Spezifika, wie lange dieses Intervall ist, können von Browser zu Browser und über Plattformen hinweg variieren. Das Intervall wird auch wahrscheinlich von Benutzerpräferenzen beeinflusst; beispielsweise 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 einen <button>.

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser