Skip to content

MouseEvent.movementX/Y - update events that set a value #42929

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wbamberg merged 1 commit into from
Jan 28, 2026
+30 −17
Merged

MouseEvent.movementX/Y - update events that set a value #42929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions files/en-us/web/api/mouseevent/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ _This interface also inherits properties of its parents, {{domxref("UIEvent")}}
- {{domxref("MouseEvent.metaKey")}} {{ReadOnlyInline}}
- : Returns `true` if the <kbd>meta</kbd> key was down when the mouse event was fired.
- {{domxref("MouseEvent.movementX")}} {{ReadOnlyInline}}
- : The X coordinate of the mouse pointer relative to the position of the last {{domxref("Element/mousemove_event", "mousemove")}} event.
- : The X coordinate of the mouse pointer relative to the position of the last move event of the same type (a {{domxref("Element/mousemove_event", "mousemove")}}, {{domxref("Element/pointermove_event", "pointermove")}}, or {{domxref("Element/pointerrawupdate_event", "pointerrawupdate")}}).
- {{domxref("MouseEvent.movementY")}} {{ReadOnlyInline}}
- : The Y coordinate of the mouse pointer relative to the position of the last {{domxref("Element/mousemove_event", "mousemove")}} event.
- : The Y coordinate of the mouse pointer relative to the position of the last move event of the same type (a {{domxref("Element/mousemove_event", "mousemove")}}, {{domxref("Element/pointermove_event", "pointermove")}}, or {{domxref("Element/pointerrawupdate_event", "pointerrawupdate")}}).
- {{domxref("MouseEvent.offsetX")}} {{ReadOnlyInline}}
- : The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
- {{domxref("MouseEvent.offsetY")}} {{ReadOnlyInline}}
Expand Down
20 changes: 13 additions & 7 deletions files/en-us/web/api/mouseevent/movementx/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,33 @@ browser-compat: api.MouseEvent.movementX

{{APIRef("Pointer Lock API")}}

The **`movementX`** read-only property of the {{domxref("MouseEvent")}} interface provides the difference in the X coordinate of the mouse pointer between the given event and the previous {{domxref("Element/mousemove_event", "mousemove")}} event.
The **`movementX`** read-only property of the {{domxref("MouseEvent")}} interface provides the difference in the X coordinate of the mouse (or pointer) between the given move event and the previous move event of the same type.

In other words, the value of the property is computed like this: `currentEvent.movementX = currentEvent.screenX - previousEvent.screenX`.
The value is zero for all events other than {{domxref("Element/mousemove_event", "mousemove")}}, {{domxref("Element/pointermove_event", "pointermove")}}, and {{domxref("Element/pointerrawupdate_event", "pointerrawupdate")}}.

> [!WARNING]
> Browsers [use different units for `movementX` and `screenX`](https://github.com/w3c/pointerlock/issues/42) 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 ({{domxref("MouseEvent.screenX", "screenX")}}, {{domxref("MouseEvent.screenY", "screenY")}}) and the previous client values.
> Browsers [use different units for `movementX` and `screenX`](https://github.com/w3c/pointerlock/issues/42) 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 ({{domxref("MouseEvent.screenX", "screenX")}}, {{domxref("MouseEvent.screenY", "screenY")}}) and the previous client values.
## Value

A number. Always zero on any {{domxref("MouseEvent")}} other than `mousemove`.
A number.
Always zero on any {{domxref("MouseEvent")}} other than `mousemove`, and any {{domxref("PointerEvent")}} other than `pointermove` or `pointerrawevent`.

## Examples

### Log mouse movement for `mousemove` events

This example logs the amount of mouse movement using `movementX` and {{domxref("MouseEvent.movementY", "movementY")}}.

### HTML
#### HTML

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

### JavaScript
#### JavaScript

```js
const log = document.getElementById("log");
Expand All @@ -44,9 +50,9 @@ function logMovement(event) {
document.addEventListener("mousemove", logMovement);
```

### Result
#### Result

{{EmbedLiveSample("Examples")}}
{{EmbedLiveSample("### Log mouse movement for `mousemove` events")}}

## Specifications

Expand Down
23 changes: 15 additions & 8 deletions files/en-us/web/api/mouseevent/movementy/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,34 @@ browser-compat: api.MouseEvent.movementY

{{APIRef("Pointer Lock API")}}

The **`movementY`** read-only property of the {{domxref("MouseEvent")}} interface provides the difference in the Y coordinate of the mouse pointer between the given event and the previous {{domxref("Element/mousemove_event", "mousemove")}} event.
The **`movementY`** read-only property of the {{domxref("MouseEvent")}} interface provides the difference in the Y coordinate of the mouse (or pointer) between the given move event and the previous move event of the same type.

In other words, the value of the property is computed like this: `currentEvent.movementY = currentEvent.screenY - previousEvent.screenY`.
The value is zero for all events other than {{domxref("Element/mousemove_event", "mousemove")}}, {{domxref("Element/pointermove_event", "pointermove")}}, and {{domxref("Element/pointerrawupdate_event", "pointerrawupdate")}}.

> [!WARNING]
> Browsers [use different units for `movementY` and `screenY`](https://github.com/w3c/pointerlock/issues/42) than what the specification defines. Depending on the browser and operating system, the `movementY` 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 ({{domxref("MouseEvent.screenX", "screenX")}}, {{domxref("MouseEvent.screenY", "screenY")}}) and the previous client values.
> Browsers [use different units for `movementY` and `screenY`](https://github.com/w3c/pointerlock/issues/42) than what the specification defines.
> Depending on the browser and operating system, the `movementY` 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 ({{domxref("MouseEvent.screenX", "screenX")}}, {{domxref("MouseEvent.screenY", "screenY")}}) and the previous client values.

## Value

A number. Always zero on any {{domxref("MouseEvent")}} other than `mousemove`.
A number.
Always zero on any {{domxref("MouseEvent")}} other than `mousemove`, and any {{domxref("PointerEvent")}} other than `pointermove` or `pointerrawevent`.

## Examples

### Log mouse movement for `mousemove` events

This example logs the amount of mouse movement using {{domxref("MouseEvent.movementX", "movementX")}} and `movementY`.

### HTML
#### HTML

```html
<p id="log">Move your mouse around.</p>
<p id="log">Move your mouse around inside this element.</p>
```

### JavaScript
#### JavaScript

```js
const log = document.getElementById("log");
Expand All @@ -40,9 +47,9 @@ function logMovement(event) {
document.addEventListener("mousemove", logMovement);
```

### Result
#### Result

{{EmbedLiveSample("Examples")}}
{{EmbedLiveSample("Log mouse movement for `mousemove` events")}}

## Specifications

Expand Down