Signatur
Beschreibung
Die schreibgeschützte Eigenschaft movementX der Schnittstelle MouseEvent gibt an, wie weit sich Maus oder Zeiger seit dem letzten Bewegungsereignis waagerecht bewegt hat. Positive Werte bedeuten eine Bewegung nach rechts, negative eine nach links. Vereinfacht gilt: movementX = aktuellesEvent.screenX - vorherigesEvent.screenX.
Richtig nützlich wird die Eigenschaft zusammen mit der Pointer Lock API. Ist der Zeiger gesperrt (element.requestPointerLock()), bleiben clientX, screenX usw. unverändert, weil sich der Cursor nicht mehr bewegt. movementX und movementY liefern dann trotzdem die reine Bewegung der Maus. Deshalb ist das die übliche Grundlage für Kamerasteuerung in 3D-Spielen, Drehregler und Ziehen ohne Bildschirmrand.
Auch ohne Pointer Lock hilft movementX beim Ziehen und Verschieben (Drag & Drop, Schieberegler, Schwenken von Karten): Man muss die letzte Position nicht selbst speichern. Bei anderen Ereignistypen als mousemove/pointermove (z. B. click, mousedown) ist der Wert in der Regel 0.
Rückgabewert
0 = keine waagerechte Bewegung. Je nach Browser ganzzahlig oder als Gleitkommazahl (Bruchteile von Pixeln).Beispiele
Bewegungsdelta beim Mausbewegen ausgeben
document.addEventListener('mousemove', (event) => {
// Richtung und Stärke der waagerechten Bewegung
const richtung = event.movementX > 0 ? 'rechts' : event.movementX < 0 ? 'links' : 'keine';
console.log(`movementX: ${event.movementX} (${richtung})`);
});Element per Ziehen verschieben (ohne gespeicherte Startposition)
const box = document.querySelector('#box');
let x = 0;
const onMove = (event) => {
x += event.movementX;
box.style.transform = `translateX(${x}px)`;
};
box.addEventListener('pointerdown', (event) => {
box.setPointerCapture(event.pointerId);
box.addEventListener('pointermove', onMove);
});
box.addEventListener('pointerup', (event) => {
box.releasePointerCapture(event.pointerId);
box.removeEventListener('pointermove', onMove);
});Kamera drehen mit Pointer Lock
const canvas = document.querySelector('canvas');
const empfindlichkeit = 0.002;
let yaw = 0; // Drehung um die senkrechte Achse (Radiant)
canvas.addEventListener('click', () => canvas.requestPointerLock());
const onMouseMove = (event) => {
yaw -= event.movementX * empfindlichkeit;
console.log(`Blickwinkel: ${(yaw * 180 / Math.PI).toFixed(1)}°`);
};
document.addEventListener('pointerlockchange', () => {
if (document.pointerLockElement === canvas) {
document.addEventListener('mousemove', onMouseMove);
} else {
document.removeEventListener('mousemove', onMouseMove);
}
});// Wichtig · Fallstricke
- Einheit uneinheitlich: Laut Spezifikation sind es Bildschirmpixel. Manche Browser (z. B. Chrome) liefern bei Bildschirmskalierung (
devicePixelRatio≠ 1) aber physische Pixel, andere CSS-Pixel. Für präzise Umrechnung gegebenenfalls durchwindow.devicePixelRatioteilen und in mehreren Browsern testen. - Ausreißer: Beim Aktivieren von Pointer Lock oder wenn der Zeiger ins Fenster zurückkehrt, kommen teils einzelne sehr große Werte vor. In Spielen solche Sprünge herausfiltern oder begrenzen.
- Rohdaten: Ohne Mausbeschleunigung des Betriebssystems geht es mit
requestPointerLock({ unadjustedMovement: true })(Chromium; Rückgabewert ist dort ein Promise). - Veraltete Präfixe wie
mozMovementXundwebkitMovementXwerden nicht mehr gebraucht. - Bei
pointermovemit zusammengefassten Ereignissen (getCoalescedEvents()) enthält jedes Teilereignis sein eigenes Delta, und die Summe ergibt das Delta des Hauptereignisses. - Die Eigenschaft ist schreibgeschützt. In synthetischen Ereignissen lässt sie sich über das Init-Wörterbuch setzen:
new MouseEvent('mousemove', { movementX: 5 }).