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