PointerEvent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Some parts of this feature may have varying levels of support.

Die PointerEvent-Schnittstelle repräsentiert den Zustand eines DOM-Ereignisses, das von einem Zeiger erzeugt wird, wie zum Beispiel die Geometrie des Berührungspunkts, der Gerätetyp, der das Ereignis erzeugt hat, der Druck, der auf die Kontaktfläche ausgeübt wurde usw.

Ein Zeiger ist eine hardwareunabhängige Darstellung von Eingabegeräten (wie einer Maus, einem Stift oder einem Berührungspunkt auf einer touchfähigen Oberfläche). Der Zeiger kann auf eine bestimmte Koordinate (oder einen Satz von Koordinaten) auf der Kontaktfläche wie einem Bildschirm zielen.

Ein Treffer-Test eines Zeigers ist der Prozess, den ein Browser verwendet, um das Ziel-Element für ein Zeigerereignis zu bestimmen. Typischerweise wird dies durch Berücksichtigung der Position des Zeigers und auch der visuellen Anordnung der Elemente in einem Dokument auf Bildschirmmedien bestimmt.

Konstruktoren

PointerEvent(): Erstellt ein synthetisches und nicht vertrauenswürdiges PointerEvent.

Instanz-Eigenschaften

Diese Schnittstelle erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Schreibgeschützt: Stellt den Winkel zwischen einer Achse eines Transducers (einem Zeiger oder Stylus) und der X-Y-Ebene eines Gerätebildschirms dar.
PointerEvent.azimuthAngle Schreibgeschützt: Stellt den Winkel zwischen der Y-Z-Ebene und der Ebene, die sowohl die Achse des Transducers (einem Zeiger oder Stylus) als auch die Y-Achse enthält, dar.
PointerEvent.persistentDeviceId Schreibgeschützt Experimentell: Eine eindeutige Kennung für das Zeigegerät, das das PointerEvent erzeugt.
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-Pixel, der Kontaktgeometrie des Zeigers.
PointerEvent.height Schreibgeschützt: Die Höhe (Größe auf der Y-Achse), in CSS-Pixel, 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 bzw. maximalen Druck darstellen, den die Hardware erkennen 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 ist.
PointerEvent.tiltX Schreibgeschützt: Der Flächenwinkel (in Grad, im Bereich von -90 bis 90) zwischen der Y–Z-Ebene und der Ebene, die sowohl die Achse des Zeigers (z. B. Pen-Stylus) als auch die Y-Achse enthält.
PointerEvent.tiltY Schreibgeschützt: Der Flächenwinkel (in Grad, im Bereich von -90 bis 90) zwischen der X–Z-Ebene und der Ebene, die sowohl die Achse des Zeigers (z. B. Pen-Stylus) als auch die X-Achse enthält.
PointerEvent.twist Schreibgeschützt: Die im Uhrzeigersinn erfolgende Drehung des Zeigers (z. B. Pen-Stylus) 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, etc.).
PointerEvent.isPrimary Schreibgeschützt: Gibt an, ob der Zeiger den primären Zeiger dieses Zeigertyps darstellt.

Instanz-Methoden

PointerEvent.getCoalescedEvents() Sicherer Kontext: Gibt eine Sequenz aller PointerEvent-Instanzen zurück, die in das ausgelöste pointermove-Ereignis zusammengeführt wurden.
PointerEvent.getPredictedEvents(): Gibt eine Sequenz von PointerEvent-Instanzen zurück, die der Browser vorherzusagen erwartet und die dem ausgelösten pointermove-Ereignis' zusammengeführten Ereignissen folgen werden.

Zeiger-Ereignistypen

Die PointerEvent-Schnittstelle verfügt über mehrere Ereignistypen. Um zu bestimmen, welches Ereignis ausgelöst wurde, sehen Sie sich die type-Eigenschaft des Ereignisses an.

Hinweis: Es ist wichtig zu beachten, dass in vielen Fällen sowohl Zeiger- als auch Mausereignisse gesendet werden (um nicht zeigerspezifischen Code noch mit dem Benutzer interagieren zu lassen). Wenn Sie Zeigerereignisse verwenden, sollten Sie preventDefault() aufrufen, um zu verhindern, dass das Mausereignis ebenfalls gesendet wird.

pointerover: Dieses Ereignis wird ausgelöst, wenn ein Zeigegerät in die Treffer-Test-Grenzen eines Elements bewegt wird.
pointerenter: Dieses Ereignis wird ausgelöst, wenn ein Zeigegerät in die Treffer-Test-Grenzen eines Elements oder eines seiner Nachkommen bewegt wird, einschließlich des Ergebnisses eines pointerdown-Ereignisses von einem Gerät, das kein Hover unterstützt (siehe pointerdown). Dieser Ereignistyp ähnelt pointerover, unterscheidet sich jedoch dadurch, dass er nicht bubblet.
pointerdown: Das Ereignis wird ausgelöst, wenn ein Zeiger aktiv wird. Für die Maus wird es ausgelöst, wenn das Gerät von keinem gedrückten zu mindestens einem gedrückten Knopf wechselt. Für Touch wird es ausgelöst, wenn physischer Kontakt mit dem Digitalisierer hergestellt wird. Für den Stift wird es ausgelöst, wenn der Stylus physischen Kontakt mit dem Digitalisierer herstellt.

Hinweis: Für Touchscreen-Browser, die direkte Manipulation erlauben, löst ein pointerdown-Ereignis einen impliziten Zeigerfang aus, wodurch das Ziel alle nachfolgenden Zeigerereignisse erfasst, als ob sie über dem erfassenden Ziel auftreten. Dementsprechend werden pointerover, pointerenter, pointerleave und pointerout nicht ausgelöst, solange dieser Fang aktiv ist. Der Fang kann manuell durch Aufruf von element.releasePointerCapture auf dem Zielelement freigegeben werden, oder er wird implizit nach einem pointerup- oder pointercancel-Ereignis freigegeben.
pointermove: Dieses Ereignis wird ausgelöst, wenn ein Zeiger die Koordinaten ändert.
pointerrawupdate Experimentell: Dieses Ereignis wird ausgelöst, wenn eine der Eigenschaften eines Zeigers sich ändert.
pointerup: Dieses Ereignis wird ausgelöst, wenn ein Zeiger nicht mehr aktiv ist.
pointercancel: Ein Browser löst dieses Ereignis aus, wenn er feststellt, dass der Zeiger keine Ereignisse mehr generieren kann (zum Beispiel, wenn das zugehörige Gerät deaktiviert wird).
pointerout: Dieses Ereignis wird aus mehreren Gründen ausgelöst, einschließlich: das Zeigegerät wird aus den Treffer-Test-Grenzen eines Elements hinausbewegt; das pointerup-Ereignis wird für ein Gerät ausgelöst, das kein Hover unterstützt (siehe pointerup); nach Auslösen des pointercancel-Ereignisses (siehe pointercancel); wenn ein Pen-Stylus den Hoverbereich verlässt, der vom Digitalisierer erkannt werden kann.
pointerleave: Dieses Ereignis wird ausgelöst, wenn ein Zeigegerät aus den Treffer-Test-Grenzen eines Elements hinausbewegt wird. Für Geräte mit Stift wird dieses Ereignis ausgelöst, wenn der Stylus den Hoverbereich verlässt, der vom Digitalisierer erkannt werden kann.
gotpointercapture: Dieses Ereignis wird ausgelöst, wenn ein Element Zeigerfang erhält.
lostpointercapture: Dieses Ereignis wird ausgelöst, nachdem der Zeigerfang für einen Zeiger freigegeben wird.

Beispiel

Beispiele für jede Eigenschaft, jeden Ereignistyp und jeden globalen Ereignis-Handler sind in ihren jeweiligen Referenzseiten enthalten.

Spezifikationen

Specification
Pointer Events # pointerevent-interface