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 ⁨Juli 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 Schaltfläche eines Zeigegeräts (wie die Primärtaste einer Maus) wird gedrückt und 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 Standardtastenereignis-Handler 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 außerhalb des Elements bewegt wird, bevor die Taste losgelassen wird, wird das Ereignis auf dem spezifischsten übergeordneten Element ausgelöst, das beide Elemente enthält.

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

Das Ereignis ist ein geräteunabhängiges Ereignis — das bedeutet, es kann durch Berührung, Tastatur, Maus und jede andere von unterstützender Technologie bereitgestellte Mechanismus 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

Dieses Interface erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Schreibgeschützt Experimentell: Repräsentiert den Winkel zwischen der Achse eines Wandlers (einem Zeiger oder Stift) und der X-Y-Ebene eines Gerätsbildschirms.
PointerEvent.azimuthAngle Schreibgeschützt Experimentell: Repräsentiert den Winkel zwischen der Y-Z-Ebene und der Ebene, die sowohl die Achse des Wandlers (einem Zeiger oder Stift) 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 entlang der X-Achse), in CSS-Pixeln, der Kontaktgeometrie des Zeigers.
PointerEvent.height Schreibgeschützt: Die Höhe (Größe entlang der Y-Achse), in CSS-Pixeln, der Kontaktgeometrie des Zeigers.
PointerEvent.pressure Schreibgeschützt: Der normalisierte Druck des Zeigereingabewertes 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 Tangentialdruck des Zeigereingabewertes (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 Winkel in der Ebene (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 Stiftzeigers) als auch die Y-Achse enthält.
PointerEvent.tiltY Schreibgeschützt: Der Winkel in der Ebene (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 Stiftzeigers) als auch die X-Achse enthält.
PointerEvent.twist Schreibgeschützt: Die Drehung im Uhrzeigersinn des Zeigers (z.B. eines Stiftzeigers) 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 in den Ereignishandler für click übergebene PointerEvent-Objekt hat seine detail-Eigenschaft auf die Anzahl der Klicks auf das target gesetzt. Mit anderen Worten, detail wird bei einem Doppelklick 2, bei einem Dreifachklick 3 und so weiter sein. Dieser Zähler wird nach einem kurzen Zeitraum ohne Klicks zurückgesetzt; die genauen Zeiten, wie lange dieser Zeitraum dauert, können zwischen Browsern und Plattformen variieren. Wahrscheinlich wird dieses Intervall auch durch Benutzereinstellungen beeinflusst; beispielsweise könnten 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> 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 auszuführen, um die Klickanzahl zu erhöhen. Wenn Sie eine Pause zwischen den Klicks machen, wird die Anzahl zurückgesetzt.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden