MouseEvent: movementX-Eigenschaft
Baseline
2026
Neu verfügbar
Seit January 2026 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die schreibgeschützte movementX-Eigenschaft der MouseEvent-Schnittstelle bietet die Differenz in der X-Koordinate der Maus (oder des Zeigers) zwischen dem angegebenen Bewegungsereignis und dem vorherigen Bewegungsereignis desselben Typs.
Mit anderen Worten, der Wert der Eigenschaft wird folgendermaßen berechnet: currentEvent.movementX = currentEvent.screenX - previousEvent.screenX.
Der Wert ist null für alle Ereignisse außer mousemove, pointermove und pointerrawupdate.
Warnung:
Browser verwenden unterschiedliche Einheiten für movementX und screenX als in der Spezifikation definiert.
Abhängig vom Browser und Betriebssystem können die movementX-Einheiten ein physikalisches Pixel, ein logisches Pixel oder ein CSS-Pixel sein. Es kann ratsam sein, die Bewegungseigenschaften zu vermeiden und stattdessen das Delta zwischen den aktuellen Client-Werten (screenX, screenY) und den vorherigen Client-Werten zu berechnen.
Wert
Eine Zahl.
Immer null bei jedem MouseEvent außer mousemove, und jedem PointerEvent außer pointermove oder pointerrawupdate.
Beispiele
Mausbewegung für mousemove-Ereignisse protokollieren
Dieses Beispiel protokolliert die Menge der Mausbewegung unter Verwendung von movementX und movementY.
HTML
<p id="log">Move your mouse around.</p>
JavaScript
const log = document.getElementById("log");
function logMovement(event) {
log.insertAdjacentHTML(
"afterbegin",
`movement: ${event.movementX}, ${event.movementY}<br>`,
);
while (log.childNodes.length > 128) log.lastChild.remove();
}
document.addEventListener("mousemove", logMovement);
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Pointer Lock 2.0 # dom-mouseevent-movementx |