MouseEvent: movementX 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 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. 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

html

<p id="log">Move your mouse around.</p>

JavaScript

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

	Desktop						Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`movementX`	3722–37	13	411–41	2415–24	96–8	3725–37	414–41	2414–24	86–8	3.01.0–3.0	374.4–37