MouseEvent: movementY property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The movementY
read-only property of the MouseEvent
interface provides the difference in the Y coordinate of the mouse pointer between the given event and the previous mousemove
event.
In other words, the value of the property is computed like this: currentEvent.movementY = currentEvent.screenY - previousEvent.screenY
.
Warning:
Browsers use different units for movementY
and screenY
than what the specification defines. Depending on the browser and operating system, the movementY
units may be a physical pixel, a logical pixel, or a CSS pixel. You may want to avoid the movement properties, and instead calculate the delta between the current client values (screenX
, screenY
) and the previous client values.
Value
A number. Always zero on any MouseEvent
other than mousemove
.
Examples
This example logs the amount of mouse movement using movementX
and movementY
.
HTML
<p id="log">Move your mouse around.</p>
JavaScript
function logMovement(event) {
log.innerText = `movement: ${event.movementX}, ${event.movementY}\n${log.innerText}`;
}
const log = document.getElementById("log");
document.addEventListener("mousemove", logMovement);
Result
Specifications
Specification |
---|
Pointer Lock 2.0 # dom-mouseevent-movementy |
Browser compatibility
BCD tables only load in the browser