Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Element: pointermove-Ereignis

Baseline
Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.

Das pointermove-Ereignis wird ausgelöst, wenn sich die Koordinaten eines Zeigers ändern und der Zeiger nicht durch die touch-action eines Browsers abgebrochen wurde. Das Ereignis wird auch ausgelöst, wenn sich eine andere Eigenschaft des Zeigers ändert, sofern diese Änderung kein anderes Zeigerereignis auslöst. Dazu gehören Änderungen an Druck, tangentialem Druck, Neigung, Drehung, Kontaktgeometrie (Breite und Höhe) oder gleichzeitig gedrückten Tasten.

Das pointermove-Ereignis kann zusammengefasste Ereignisse enthalten, wenn bereits ein anderes pointermove-Ereignis mit derselben Zeiger-ID vorliegt, das noch nicht im Event-Loop ausgelöst wurde. Werden Ereignisse zusammengefasst, ist das target des ausgelösten Ereignisses dasselbe wie das des zuletzt zusammengefassten Ereignisses. Weitere Informationen zu zusammengefassten Ereignissen finden Sie in der Dokumentation zu PointerEvent.getCoalescedEvents().

Dieses Ereignis ähnelt dem mousemove-Ereignis, bietet aber mehr Funktionen. Diese Ereignisse treten unabhängig davon auf, ob Zeigertasten gedrückt sind. Sie können sehr häufig ausgelöst werden. Die Häufigkeit hängt unter anderem davon ab, wie schnell der Benutzer den Zeiger bewegt, wie leistungsfähig das Gerät ist und welche anderen Aufgaben und Prozesse ausgeführt werden.

Der Unterschied zwischen pointerrawupdate und pointermove liegt in der Häufigkeit, mit der sie ausgelöst werden. Ein Browser kann pointermove-Ereignisse verzögern, um die Leistung zu verbessern. pointerrawupdate-Ereignisse werden dagegen so früh und so häufig ausgelöst, wie der Browser sie bereitstellen kann. In den meisten Anwendungsfällen sollten Sie pointermove bevorzugen, um Leistungsprobleme zu vermeiden.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

js
addEventListener("pointermove", (event) => { })

Alternativ können Sie die Ereignisbehandler-Eigenschaft der Schnittstelle zuweisen:

js
onpointermove = (event) => { }

Ereignistyp

Ein PointerEvent. Erbt von Event.

Event UIEvent MouseEvent PointerEvent

Verwendungshinweise

Das Ereignis vom Typ PointerEvent liefert alle Informationen, die Sie über die Interaktion des Benutzers mit dem Zeigegerät benötigen, darunter Position, zurückgelegte Strecke, Tastenzustände und vieles mehr.

Beispiele

So fügen Sie mit addEventListener() einen Behandler für pointermove-Ereignisse hinzu:

js
const para = document.querySelector("p");

para.addEventListener("pointermove", (event) => {
  console.log("Pointer moved");
});

Sie können auch die Ereignisbehandler-Eigenschaft onpointermove verwenden. Beachten Sie jedoch, dass dadurch gegebenenfalls andere über onpointermove hinzugefügte Ereignisbehandler ersetzt werden:

js
const para = document.querySelector("p");

para.onpointermove = (event) => {
  console.log("Pointer moved");
};

Spezifikationen

Spezifikation
Pointer Events
# pointermove
Pointer Events
# dom-globaleventhandlers-onpointermove

Browser-Kompatibilität

Siehe auch