JavaScript MouseEvent movementX Property

What You’ll Learn

MouseEvent.movementX is a read-only number: how far the pointer moved horizontally since the previous move event. Learn when it is non-zero, how it relates to screenX, unit caveats, safer DIY deltas, and five try-it labs.

Introduction

Absolute positions like clientX answer “where is the cursor?” movementX answers “how far did it move left or right since the last move?”—perfect for pans, look controls, and drawing tools.

document.addEventListener("mousemove", (event) => {
  console.log(event.movementX); // delta since previous mousemove
});

Understanding the Property

MDN: movementX 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, it is computed like currentEvent.screenX - previousEvent.screenX.

• Instance — read event.movementX in a handler.
• Delta — positive when moving right, negative when moving left (typical).
• Move-only — zero on click and most other mouse events.
• Unit caution — browsers may disagree on pixel units (see Notes).

📝 Syntax

const dx = mouseEvent.movementX;

Value

A number for the horizontal movement since the previous same-type move event. Always 0 on other MouseEvent types (and on pointer events other than pointermove / pointerrawupdate).

Safer DIY delta (portable units)

let prevScreenX = null;

document.addEventListener("mousemove", (e) => {
  const dx = prevScreenX == null ? 0 : e.screenX - prevScreenX;
  prevScreenX = e.screenX;
  console.log({ movementX: e.movementX, diyDx: dx });
});

⚖️ movementX vs Absolute X Properties

Examples Gallery

Examples follow MDN MouseEvent.movementX. Move the mouse to see non-zero deltas; click to confirm zeros.

const log = document.getElementById("log");

function logMovement(event) {
  log.insertAdjacentHTML(
    "afterbegin",
    `movement: ${event.movementX}, ${event.movementY}
`
  );
  while (log.childNodes.length > 128) log.lastChild.remove();
}

document.addEventListener("mousemove", logMovement);

movement: 3, 0
movement: 5, 1
movement: 2, -1

document.addEventListener("click", (e) => {
  console.log({
    type: e.type,
    movementX: e.movementX, // 0
    clientX: e.clientX      // absolute position still set
  });
});

{
  type: "click",
  movementX: 0,
  clientX: 214
}

let prev = null;

document.addEventListener("mousemove", (e) => {
  const diyDx = prev == null ? 0 : e.screenX - prev;
  prev = e.screenX;
  console.log({ movementX: e.movementX, diyDx });
});

{
  movementX: 4,
  diyDx: 4
}

let traveled = 0;
const out = document.getElementById("out");

document.addEventListener("mousemove", (e) => {
  traveled += Math.abs(e.movementX);
  out.textContent = `Horizontal travel ≈ ${Math.round(traveled)}`;
});

Horizontal travel ≈ 842

const box = document.getElementById("box");
let dragging = false;
let x = 40;

box.addEventListener("mousedown", () => { dragging = true; });
window.addEventListener("mouseup", () => { dragging = false; });

window.addEventListener("mousemove", (e) => {
  if (!dragging) return;
  x += e.movementX;
  box.style.transform = `translateX(${x}px)`;
});

Box follows horizontal drag using movementX deltas.

🚀 Common Use Cases

• Pointer-lock look / camera controls in games.
• Canvas drawing tools that react to stroke velocity or direction.
• Drag-to-pan maps, timelines, and image viewers.
• Gesture metrics (how far the cursor traveled this frame).
• Teaching relative vs absolute mouse coordinates next to clientX.

🔧 How It Works

📝 Notes

• Baseline Newly available (MDN, since January 2026)—verify older browsers if needed.
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• MDN warning: unit systems for movementX / screenX can differ by browser and OS.
• Prefer DIY screenX/clientX deltas when pixel units must match everywhere.
• Related: metaKey, movementY, clientX, MouseEvent(), Window, JavaScript hub.

💡 Best Practices