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 Szenarien eintritt:

Eine Taste eines Zeigegeräts (z. B. die primäre Maustaste) wird gedrückt und losgelassen, während sich der Zeiger im Inneren des Elements befindet.
Auf dem Element wird eine Touch-Geste 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 gilt, die über einen Standard-Tastaturereignishandler verfügen, und daher andere Elemente ausschließt, die durch Einstellen des tabindex-Attributs fokussierbar gemacht wurden.

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 enthält.

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 – es kann durch Berührung, Tastatur, Maus und jeden anderen Mechanismus, den unterstützende Technologien bereitstellen, aktiviert 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 Wandlers (eines Zeigers oder Stifts) 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 Wandlerachse (eines Zeigers oder Stifts) 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 (Größe auf der X-Achse), in CSS-Pixel, der Kontaktgeometrie des Zeigers.
PointerEvent.height Schreibgeschützt: Die Höhe (Größe auf der Y-Achse), in CSS-Pixel, der Kontaktgeometrie des Zeigers.
PointerEvent.pressure Schreibgeschützt: Der normalisierte Druck des Zeigereingangs 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 des Zeigereingangs (auch bekannt als Fassdruck oder Zylinderbelastung) 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 Zeigerachse (z.B. 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 Zeigerachse (z.B. Stift-Stylus) als auch die X-Achse enthält.
PointerEvent.twist Schreibgeschützt: Die Drehung des Zeigers (z.B. Stift-Stylus) im Uhrzeigersinn 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 in den Ereignishandler für click übergeben wird, hat seine detail-Eigenschaft auf die Anzahl der Klicks auf das target gesetzt. Mit anderen Worten, detail wird 2 für einen Doppelklick, 3 für einen Dreifachklick und so weiter. Dieser Zähler wird nach einem kurzen Intervall ohne Klicks zurückgesetzt; die spezifische Dauer dieses Intervalls kann je nach Browser und Plattform variieren. Das Intervall wird wahrscheinlich auch durch Benutzerpräferenzen beeinflusst; z. B. können Zugriffsoptionen 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, aufeinanderfolgende Klicks auf den Button auszuführen, um die Klickanzahl zu erhöhen. Wenn Sie eine Pause zwischen den Klicks einlegen, wird die Anzahl zurückgesetzt.

Spezifikationen

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