MouseEvent: movementX property
The movementX
read-only property of the MouseEvent
interface provides the difference in the X 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.movementX = currentEvent.screenX - previousEvent.screenX
.
Warning: Browsers use different units for movementX
and screenX
than what the specification defines. Depending on the browser and operating system, the movementX
units may be a physical pixel, a logical pixel, or a CSS pixel.
Value
A number.
Examples
This example logs the amount of mouse movement using movementX
and movementY
.
HTML
html
<p id="log">Move your mouse around.</p>
JavaScript
js
function logMovement(event) {
log.insertAdjacentHTML(
"afterbegin",
`movement: ${event.movementX}, ${event.movementY}<br>`
);
while (log.childNodes.length > 128) log.lastChild.remove();
}
const log = document.getElementById("log");
document.addEventListener("mousemove", logMovement);
Result
Specifications
Specification |
---|
Pointer Lock 2.0 # dom-mouseevent-movementx |
Browser compatibility
BCD tables only load in the browser