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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
movementX | Chrome
Full support
37
| Edge Full support 13 | Firefox
Full support
41
| IE No support No | Opera Full support Yes | Safari
Full support
9
| WebView Android
Full support
37
| Chrome Android
Full support
37
| Firefox Android
Full support
41
| Opera Android Full support Yes | Safari iOS
Full support
8
| Samsung Internet Android
Full support
3.0
|
Legend
- Full support
- Full support
- No support
- No support
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.