MouseEvent.movementX

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.

Syntax

var xShift = instanceOfMouseEvent.movementX;

Return value

A number

Example

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.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 Status Comment
Pointer Lock
The definition of 'MouseEvent.movementX' in that specification. 		Candidate Recommendation Initial definition

Browser compatibility

BCD tables only load in the browser

See also