JavaScript MouseEvent x Property

What You’ll Learn

MouseEvent.x is a read-only number and an alias for clientX: horizontal position inside the viewport. Learn why the short name exists, prove x === clientX, and practice with five try-it labs.

Introduction

Some APIs like short names. event.x is simply another way to read the same viewport X that event.clientX already gives you. Pair it with event.y (alias of clientY) for a compact viewport point.

document.addEventListener("mousemove", (event) => {
  console.log(event.x);       // same as event.clientX
  console.log(event.clientX); // viewport X in CSS pixels
});

Understanding the Property

MDN: the x property is an alias for clientX. That means it is the horizontal coordinate within the application’s viewport at which the event occurred—not the document page and not the OS screen.

• Instance — read event.x in a handler.
• Number — CSS pixels from the viewport’s left edge.
• Alias — same value as event.clientX.
• Read-only — set via constructor options (usually clientX) on synthetic events.

📝 Syntax

const x = mouseEvent.x;

Value

A number in CSS pixels from the left edge of the viewport—identical to mouseEvent.clientX on supporting browsers.

⚖️ x vs Other X Coordinates

Prefer clientX in team code if clarity matters; use x when you want the short CSSOM View names alongside y.

Examples Gallery

Examples follow MDN MouseEvent.x and the related clientX behavior. Move the mouse and confirm the alias in the try-it labs.

const log = document.querySelector("#log");

document.addEventListener("mousemove", (e) => {
  log.textContent = `x: ${e.x}, y: ${e.y}`;
});

x: 220, y: 160

document.addEventListener("click", (e) => {
  console.log(e.x);
  console.log(e.clientX);
  console.log(e.x === e.clientX); // true when both are numbers
});

184
184
true

const event = new MouseEvent("click", {
  clientX: 120,
  clientY: 40,
  bubbles: true
});

console.log(event.clientX); // 120
console.log(event.x);       // 120 (alias)
console.log(event.x === event.clientX); // true

120
120
true

document.addEventListener("click", (e) => {
  console.log({
    x: e.x,
    clientX: e.clientX,
    pageX: e.pageX,
    scrollX: window.scrollX
  });
  // x and clientX match; pageX ≈ clientX + scrollX
});

{
  x: 150,
  clientX: 150,
  pageX: 150,
  scrollX: 0
}

const tip = document.querySelector("#tip");

document.addEventListener("mousemove", (e) => {
  tip.style.left = `${e.x + 12}px`;
  tip.style.top = `${e.y + 12}px`;
  tip.textContent = `${e.x}, ${e.y}`;
});

Tip element follows the pointer using position: fixed and event.x / event.y.

🚀 Common Use Cases

• Compact viewport points: { x: event.x, y: event.y }.
• Floating tooltips and custom cursors (same as clientX).
• Teaching that CSSOM View exposes short aliases for client coordinates.
• Code that already uses x / y naming consistently.
• Quick equality checks while debugging coordinate systems.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since April 2017).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Defined in the CSSOM View Module as an alias of clientX.
• Related: webkitForce, clientX, clientY, MouseEvent(), JavaScript hub.

💡 Best Practices