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.

Ein Element erhält ein click-Ereignis, wenn Folgendes eintritt:

  • Eine Taste eines Zeigegeräts (wie die Primärtaste einer Maus) wird sowohl gedrückt als auch losgelassen, während sich der Zeiger innerhalb des Elements befindet.
  • Eine Berührungsgeste wird auf dem Element ausgeführt.
  • Jede Benutzerinteraktion, die einem Klick entspricht, wie das Drücken der Leertaste oder der Eingabetaste, 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 Setzen des tabindex-Attributs fokussierbar gemacht wurden.

Wird die Taste auf einem Element gedrückt und der Zeiger wird außerhalb des Elements bewegt, 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 jeden anderen Mechanismus aktiviert werden, der von unterstützender Technologie bereitgestellt wird.

Syntax

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

js
addEventListener("click", (event) => {});

onclick = (event) => {};

Ereignistyp

Ein PointerEvent. Erbt von MouseEvent.

Event UIEvent MouseEvent PointerEvent

Hinweis: In früheren Versionen der Spezifikation war der Ereignistyp für dieses Ereignis ein MouseEvent, und dies ist immer noch der Typ, der in Firefox und Safari übergeben wird.

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Nur lesbar

Repräsentiert den Winkel zwischen einer Wandlerachse (einem Zeiger oder Stylus) und der X-Y-Ebene eines Gerätsbildschirms.

PointerEvent.azimuthAngle Nur lesbar

Repräsentiert den Winkel zwischen der Y-Z-Ebene und der Ebene, die sowohl die Wandlerachse (einem Zeiger oder Stylus) als auch die Y-Achse enthält.

PointerEvent.pointerId Nur lesbar

Eine eindeutige Kennung für den Zeiger, der das Ereignis verursacht.

PointerEvent.width Nur lesbar

Die Breite (Größe auf der X-Achse), in CSS-Pixeln, der Kontaktgeometrie des Zeigers.

PointerEvent.height Nur lesbar

Die Höhe (Größe auf der Y-Achse), in CSS-Pixeln, der Kontaktgeometrie des Zeigers.

PointerEvent.pressure Nur lesbar

Der normalisierte Druck des Zeigereingangs im Bereich von 0 bis 1, wobei 0 und 1 den minimalen und maximalen Druck darstellen, den die Hardware jeweils erkennen kann.

PointerEvent.tangentialPressure Nur lesbar

Der normalisierte Tangentialdruck des Zeigereingangs (auch bekannt als Seitendruck oder Zylinderstress) im Bereich von -1 bis 1, wobei 0 die neutrale Position der Steuerung ist.

PointerEvent.tiltX Nur lesbar

Der Ebenenwinkel (in Grad, im Bereich von -90 bis 90) zwischen der Y–Z-Ebene und der Ebene, die sowohl die Zeigerachse (z. B. ein Stylus) als auch die Y-Achse enthält.

PointerEvent.tiltY Nur lesbar

Der Ebenenwinkel (in Grad, im Bereich von -90 bis 90) zwischen der X–Z-Ebene und der Ebene, die sowohl die Zeigerachse (z. B. ein Stylus) als auch die X-Achse enthält.

PointerEvent.twist Nur lesbar

Die im Uhrzeigersinn erfolgende Drehung des Zeigers (z. B. eines Stylus) um seine Hauptachse in Grad, mit einem Wert im Bereich von 0 bis 359.

PointerEvent.pointerType Nur lesbar

Gibt den Gerätetyp an, der das Ereignis verursacht hat (Maus, Stift, Berührung etc.).

PointerEvent.isPrimary Nur lesbar

Gibt an, ob der Zeiger den primären Zeiger dieses Zeigertyps darstellt.

Hinweise zur Verwendung

Das PointerEvent-Objekt, das an den Ereignishandler für click übergeben wird, hat seine detail-Eigenschaft auf die Anzahl von Klicks auf das target gesetzt. Mit anderen Worten: detail hat den Wert 2 für einen Doppelklick, 3 für einen Dreifachklick und so weiter. Dieser Zähler wird nach einem kurzen Intervall zurückgesetzt, in dem keine weiteren Klicks stattfinden; die genaue Dauer dieses Intervalls kann je nach Browser und Plattform variieren. Das Intervall wird wahrscheinlich auch von Benutzereinstellungen beeinflusst; beispielsweise können Barrierefreiheitsoptionen dieses Intervall verlängern, um das Ausführen mehrerer Klicks mit adaptiven Schnittstellen zu erleichtern.

Beispiele

Dieses Beispiel zeigt die Anzahl aufeinander folgender Klicks auf einen <button>.

HTML

html
<button>Click</button>

JavaScript

js
const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  button.textContent = `Click count: ${event.detail}`;
});

Ergebnis

Versuchen Sie, den Button schnell hintereinander anzuklicken, um die Klickanzahl 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 Standard
# handler-onclick

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch