JavaScript MouseEvent clientX Property

Beginner
5 min read
Updated: Nov 2026
5 examples
Property
Decorative image with the word CLIENTX

Definition

The read-only clientX property is the horizontal coordinate (CSS pixels) where the mouse event occurred, measured from the left edge of the viewport (visible window) — not the full page (MDN). Pair it with clientY for the vertical position.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use event.clientX. Start with this line.

JavaScript
event.clientX
CallWhat it does
event.clientXPrimary signature.

Built into the browser. Read event.clientX on a MouseEvent — no import required.

Library declarations
JavaScript
event.clientX

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*Number (CSS pixels, may be fractional)

JavaScript Examples

Example 1 — Log on mousemove (MDN)

Show viewport coordinates as the pointer moves.

JavaScript
el.addEventListener("mousemove", (e) => {
  console.log("Client X/Y:", e.clientX, e.clientY);
});
Try It Yourself

How It Works

  1. Listen for mousemove. Fires as the pointer moves.
  2. Read clientX / clientY. Viewport coordinates.
  3. Values update often — keep logging light in real apps.
  4. Matches MDN’s sample for tracking position.

Example 2 — Read on Click

Capture the click position in the viewport.

JavaScript
el.addEventListener("click", (e) => {
  console.log("clicked at", e.clientX);
});
Try It Yourself

How It Works

  1. Listen for click. One reading per click.
  2. clientX is the X of that click in the window.
  3. Useful for menus that open under the cursor (with clientY).
  4. Still viewport-based — scroll does not change the origin.

Example 3 — clientX vs pageX

Viewport X vs document X (scroll-aware).

JavaScript
el.addEventListener("click", (e) => {
  console.log("clientX", e.clientX);
  console.log("pageX", e.pageX);
});
Try It Yourself

How It Works

  1. clientX — from the viewport left edge.
  2. pageX — from the document left edge.
  3. Often equal when scrollX is 0.
  4. After scrolling right, pageX is larger; clientX stays viewport-based.

Example 4 — clientX vs screenX

Viewport X vs whole-monitor X (as in MDN’s log).

JavaScript
el.addEventListener("mousemove", (e) => {
  console.log("Client X:", e.clientX);
  console.log("Screen X:", e.screenX);
});
Try It Yourself

How It Works

  1. clientX — inside the browser window.
  2. screenX — across the whole display.
  3. Moving the browser window changes screenX more than clientX.
  4. Prefer clientX for in-page UI positioning.

Example 5 — Synthetic MouseEvent

Set clientX in constructor options for tests.

JavaScript
const e = new MouseEvent("click", { clientX: 120, clientY: 40 });
console.log(e.clientX); // 120
Try It Yourself

How It Works

  1. new MouseEvent with clientX: 120.
  2. No physical mouse needed for the synthetic event.
  3. e.clientX is 120 as set in options.
  4. Set clientY too when handlers expect a full point.
Compatibility

Browser Support

MouseEvent.clientX is marked Baseline Widely available on MDN (since July 2015).

✓ Baseline · Widely available

MouseEvent.clientX

Viewport-relative X in CSS pixels. Pair with clientY. Safe everyday DOM API.

100% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
clientX Excellent

Bottom line: Safe everyday API. Viewport left edge → 0. See the MDN clientX reference.

Frequently Asked Questions

It is a read-only number: the horizontal mouse position in CSS pixels relative to the browser viewport (the visible window area), not the full page document.
No. MDN marks MouseEvent.clientX as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
clientX is measured from the left edge of the viewport and ignores page scroll. pageX is measured from the left edge of the document and grows when you scroll right.
screenX is relative to the entire screen (monitor). clientX is relative to the browser viewport only.
Because the viewport’s left edge is always X = 0 for client coordinates. Scrolling the document does not move that edge, so clientX stays based on what you see in the window.
Pass clientX (and usually clientY) in MouseEvent options, for example new MouseEvent("click", { clientX: 120, clientY: 40 }).

Next: clientY

Read the mouse Y coordinate relative to the viewport.

clientY tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

JavaScript MouseEvent buttons Property JavaScript MouseEvent clientY Property