JavaScript MouseEvent clientX Property

What You’ll Learn

MouseEvent.clientX is a read-only number: the mouse’s horizontal position inside the viewport (what you see in the window). Learn how it differs from pageX and screenX, why scroll does not change the left-edge rule, and five try-it labs.

Introduction

Tooltips, custom cursors, and click maps often need “where is the pointer in the window?” That is clientX (horizontal) and clientY (vertical)—coordinates relative to the visible viewport, not the whole scrolled page.

document.addEventListener("mousemove", (event) => {
  console.log(event.clientX); // pixels from viewport left
});

Understanding the Property

MDN: clientX provides the horizontal coordinate within the application’s viewport at which the event occurred (as opposed to the coordinate within the page). Clicking the left edge of the viewport always yields clientX of 0, even if the page is scrolled horizontally.

• Instance — read event.clientX in a handler.
• Number — CSS pixels; often a floating-point double.
• Viewport-relative — not document scroll, not the OS screen.
• Read-only — set via constructor options on synthetic events only.

📝 Syntax

const x = mouseEvent.clientX;

Value

A number (double) in CSS pixels from the left edge of the viewport.

⚖️ clientX vs Other X Coordinates

Pair clientX with clientY for a full viewport point. For document-relative placement (for example absolute-positioned markers on a tall page), prefer pageX / pageY.

Examples Gallery

Examples follow MDN MouseEvent.clientX. Move the mouse and compare coordinate systems in the try-it labs.

const screenLog = document.querySelector("#screen-log");

document.addEventListener("mousemove", (e) => {
  screenLog.innerText = `
    Screen X/Y: ${e.screenX}, ${e.screenY}
    Client X/Y: ${e.clientX}, ${e.clientY}`;
});

Screen X/Y: 640, 400
Client X/Y: 220, 160

// Wide page + horizontal scroll — click near the left of the *window*
document.addEventListener("click", (e) => {
  console.log("clientX:", e.clientX);
  console.log("pageX:", e.pageX);
  // Near viewport left: clientX ≈ 0 even if pageX is large after scrolling
});

clientX: 12
pageX: 812

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

console.log(event.clientX); // 120
console.log(event.clientY); // 40

120
40

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

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

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

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

Tip element follows the pointer using position: fixed and clientX/clientY.

🚀 Common Use Cases

• Floating tooltips and custom cursors that track the pointer in the window.
• Hit-testing UI chrome that is fixed to the viewport.
• Logging pointer position while teaching coordinate systems.
• Synthetic events in tests with known clientX / clientY.
• Choosing between viewport (client*) and document (page*) layouts.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Left edge of the viewport ⇒ clientX === 0, regardless of horizontal scroll.
• Related: buttons, clientY, MouseEvent(), addEventListener(), Window, JavaScript hub.

💡 Best Practices