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
bis1
, wobei0
und1
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
bis1
, wobei0
die neutrale Position der Steuerung ist. PointerEvent.tiltX
Schreibgeschützt-
Der Winkel in der Ebene (in Grad, im Bereich von
-90
bis90
) 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
bis90
) 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
bis359
. 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
<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
Loading…