Signatur
Beschreibung
movementY gibt an, um wie viele Pixel sich der Zeiger seit dem letzten Bewegungsereignis vertikal bewegt hat. Positive Werte bedeuten eine Bewegung nach unten, negative eine Bewegung nach oben. Rechnerisch entspricht der Wert ungefähr currentEvent.screenY - previousEvent.screenY.
Die Eigenschaft ist vor allem zusammen mit der Pointer Lock API wichtig: Ist der Zeiger gesperrt (element.requestPointerLock()), ändern sich clientY/screenY nicht mehr, weil der Cursor an Ort und Stelle bleibt. Nur movementX und movementY liefern dann noch Bewegungsinformationen – ideal für First-Person-Kamerasteuerung, 3D-Viewer oder unendliches Ziehen von Schiebereglern.
Auch ohne Pointer Lock eignet sich movementY, um beim Ziehen (Drag) relative Verschiebungen zu berechnen, ohne selbst die vorherige Position speichern zu müssen. Bei anderen Ereignistypen als mousemove/pointermove (z. B. click) ist der Wert in der Regel 0.
Rückgabewert
double, in manchen Browsern ganzzahlig). Positiv = nach unten, negativ = nach oben.Beispiele
Vertikale Bewegung protokollieren
document.addEventListener('mousemove', (event) => {
const richtung = event.movementY > 0 ? 'unten' : event.movementY < 0 ? 'oben' : 'keine';
console.log(`movementY: ${event.movementY} (${richtung})`);
});Kamera-Neigung mit Pointer Lock (First-Person-Steuerung)
const canvas = document.querySelector('canvas');
let pitch = 0; // Neigung in Grad
const empfindlichkeit = 0.15;
canvas.addEventListener('click', () => canvas.requestPointerLock());
const onMove = (event) => {
// Nach oben bewegen = nach oben schauen, begrenzt auf ±89°
pitch -= event.movementY * empfindlichkeit;
pitch = Math.max(-89, Math.min(89, pitch));
console.log(`Pitch: ${pitch.toFixed(1)}°`);
};
document.addEventListener('pointerlockchange', () => {
if (document.pointerLockElement === canvas) {
document.addEventListener('mousemove', onMove);
} else {
document.removeEventListener('mousemove', onMove);
}
});Zahlenwert durch vertikales Ziehen ändern
const feld = document.querySelector('#wert');
let wert = 50;
const onDrag = (event) => {
// Nach oben ziehen erhöht den Wert
wert = Math.min(100, Math.max(0, wert - event.movementY));
feld.textContent = wert;
};
feld.addEventListener('pointerdown', (event) => {
feld.setPointerCapture(event.pointerId);
feld.addEventListener('pointermove', onDrag);
});
feld.addEventListener('pointerup', () => {
feld.removeEventListener('pointermove', onDrag);
});// Wichtig · Fallstricke
- Browser-Unterschiede: Die Einheit ist nicht überall identisch. Chrome liefert teils physische Pixel (abhängig von
devicePixelRatio), Firefox und Safari CSS-Pixel; manche Browser runden auf ganze Zahlen. Für pixelgenaue Berechnungen ohne Pointer Lock besserclientY-Differenzen selbst berechnen. - Ausreißer: Besonders mit Pointer Lock können einzelne Ereignisse unplausibel große Sprünge enthalten (z. B. direkt nach dem Sperren oder Fensterwechsel). Große Werte ggf. filtern oder begrenzen.
- Mit
requestPointerLock({ unadjustedMovement: true })(Chromium) lässt sich die Maus-Beschleunigung des Betriebssystems umgehen – sinnvoll für Spiele. - Ältere Präfix-Varianten (
mozMovementY,webkitMovementY) sind veraltet und sollten nicht mehr verwendet werden. - Die Eigenschaft ist schreibgeschützt; bei synthetischen Ereignissen kann sie über das Init-Objekt von
new MouseEvent('mousemove', { movementY: 5 })gesetzt werden.