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 eines der folgenden Ereignisse eintritt:

Eine Zeigergeräte-Taste (wie die primäre Maustaste) 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 Eingabetaste, während das Element fokussiert ist. Beachten Sie, dass dies nur für Elemente mit einem Standard-Tastaturereignishandler gilt und daher andere Elemente ausschließt, die durch Setzen des tabindex-Attributs fokussierbar gemacht wurden.

Wenn die Taste auf einem Element gedrückt wird und der Zeiger vor dem Loslassen der Taste außerhalb des Elements bewegt wird, wird das Ereignis auf dem spezifischsten Vorgängerelement ausgelöst, das beide Elemente enthält.

click wird nach den Ereignissen mousedown und mouseup in dieser Reihenfolge ausgelöst.

Das Ereignis ist geräteunabhängig – das bedeutet, dass es durch Berührung, Tastatur, Maus und jeden anderen Mechanismus aktiviert werden kann, der von unterstützender Technologie bereitgestellt wird.

Syntax

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

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

onclick = (event) => {};

Eventtyp

Ein PointerEvent. Erbt von MouseEvent.

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

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Schreibgeschützt Experimentell: Stellt den Winkel zwischen einer Transducer-Achse (einem Zeiger oder Stylus) und der X-Y-Ebene eines Gerätebildschirms dar.
PointerEvent.azimuthAngle Schreibgeschützt Experimentell: Stellt den Winkel zwischen der Y-Z-Ebene und der Ebene dar, die sowohl die Transducer-Achse (einem 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 (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 Zeigereingangs im Bereich von 0 bis 1, wobei 0 und 1 den minimalen und maximalen Druck darstellen, den die Hardware erfassen kann.
PointerEvent.tangentialPressure Schreibgeschützt: Der normalisierte tangentiale Druck des Zeigereingangs (auch bekannt als Fassdruck oder Zylinderstress) im Bereich von -1 bis 1, wobei 0 die neutrale Position der Steuerung darstellt.
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. Stiftstylus) 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. Stiftstylus) als auch die X-Achse enthält.
PointerEvent.twist Schreibgeschützt: Die Drehung des Zeigers (z.B. Stiftstylus) 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, Touch usw.).
PointerEvent.isPrimary Schreibgeschützt: Gibt an, ob der Zeiger den primären Zeiger dieses Zeigertyps darstellt.

Anwendungshinweise

Das an den Ereignishandler für click übergebene PointerEvent-Objekt hat seine detail-Eigenschaft auf die Anzahl der Klicks gesetzt, die auf dem target erfolgt sind. Mit anderen Worten, detail wird bei einem Doppelklick 2 sein, bei einem Dreifachklick 3 und so weiter. Dieser Zähler wird nach einem kurzen Intervall ohne Klicks zurückgesetzt; die genaue Dauer dieses Intervalls kann je nach Browser und Plattform variieren. Das Intervall wird wahrscheinlich auch durch Benutzereinstellungen beeinflusst werden; zum Beispiel können Optionen zur Barrierefreiheit dieses Intervall verlängern, um es einfacher zu machen, Mehrfachklicks 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 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