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

Eine Zeigegerät-Schaltfläche (wie die Primärschaltfläche einer Maus) wird sowohl gedrückt als auch losgelassen, während sich der Zeiger im Inneren des Elements befindet.
Eine Touch-Geste wird auf dem Element ausgeführt.
Jede Benutzerinteraktion, die einem Klick entspricht, wie das Drücken der Leertaste-Taste oder der Eingabetaste, während das Element fokussiert ist. Beachten Sie, dass dies nur für Elemente gilt, die einen Standard-Tastaturereignis-Handler haben, und daher andere Elemente ausschließt, die durch das Setzen des tabindex-Attributs fokussierbar gemacht wurden.

Wenn die Schaltfläche auf einem Element gedrückt wird und der Zeiger aus dem Element bewegt wird, bevor die Schaltfläche losgelassen wird, wird das Ereignis auf dem spezifischsten Vorfahrelement ausgelöst, das beide Elemente enthält.

click wird nach sowohl dem mousedown als auch dem mouseup Ereignis in dieser Reihenfolge ausgelöst.

Das Ereignis ist ein geräteunabhängiges Ereignis — das bedeutet, es kann durch Touch, Tastatur, Maus und jeden anderen Mechanismus ausgelöst werden, der von unterstützender Technologie bereitgestellt wird.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignisbehandlungseigenschaft.

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. Informationen zur Browser-Kompatibilität finden Sie hier.

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Schreibgeschützt Experimentell: Repräsentiert den Winkel zwischen der Achse eines Transducers (einem Zeiger oder Stift) und der X-Y-Ebene eines Geräts.
PointerEvent.azimuthAngle Schreibgeschützt Experimentell: Repräsentiert den Winkel zwischen der Y-Z-Ebene und der Ebene, die sowohl die Achse des Transducers (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 (Magnitude auf der X-Achse) in CSS-Pixeln der Kontaktgeometrie des Zeigers.
PointerEvent.height Schreibgeschützt: Die Höhe (Magnitude 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 erkennen kann.
PointerEvent.tangentialPressure Schreibgeschützt: Der normalisierte tangentiale Druck des Zeigereingangs (auch als Fassdruck oder Zylinderstress bekannt) im Bereich von -1 bis 1, wobei 0 die Neutralposition der Steuerung darstellt.
PointerEvent.tiltX Schreibgeschützt: Der Planwinkel (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 Stiftes) als auch die Y-Achse enthält.
PointerEvent.tiltY Schreibgeschützt: Der Planwinkel (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 Stiftes) als auch die X-Achse enthält.
PointerEvent.twist Schreibgeschützt: Die Drehung des Zeigers im Uhrzeigersinn (z.B. eines Stifts) um seine Hauptachse in Grad, mit einem Wert im Bereich von 0 bis 359.
PointerEvent.pointerType Schreibgeschützt: Zeigt 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.

Verwendungshinweise

Das PointerEvent-Objekt, das an den Ereignis-Handler für click übergeben wird, hat seine detail-Eigenschaft auf die Anzahl der Male gesetzt, die das target geklickt wurde. Mit anderen Worten, detail wird 2 bei einem Doppelklick, 3 bei einem Dreifachklick 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 ist wahrscheinlich auch durch Benutzereinstellungen beeinflusst; beispielsweise können Barrierefreiheitsoptionen dieses Intervall verlängern, um es einfacher zu machen, mit adaptiven Schnittstellen mehrfach zu klicken.

Beispiele

Dieses Beispiel zeigt die Anzahl der aufeinanderfolgenden Klicks auf ein <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, rasche, wiederholte Klicks auf die Schaltfläche auszuführen, um die Klickzahl zu erhöhen. Wenn Sie eine Pause zwischen den Klicks machen, wird der Zähler zurückgesetzt.

Spezifikationen

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