JavaScript MouseEvent clientY Property

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

Definition

MouseEvent.clientY is a read-only number: the vertical coordinate (CSS pixels) where the event happened inside the viewport — not the full page (MDN).

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

Syntax

Use event.clientY. Start with this line.

JavaScript
event.clientY
CallWhat it does
event.clientYPrimary signature.

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

Library declarations
JavaScript
event.clientY

Parameters

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

Return Value

Return ValueDescription
*double — Y in viewport CSS pixels

JavaScript Examples

Example 1 — Log Coordinates (MDN)

Show screen and client X/Y while the mouse moves.

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

document.addEventListener("mousemove", function (e) {
  screenLog.textContent =
    "Screen X/Y: " + e.screenX + ", " + e.screenY +
    "\nClient X/Y: " + e.clientX + ", " + e.clientY;
});
Try It Yourself

How It Works

  1. Listen for mousemove. Fires often as the pointer moves.
  2. Read clientX / clientY. Viewport coordinates (MDN).
  3. Compare to screenX / screenY. Monitor vs window.
  4. Update a log. Easy way to see live values.

Example 2 — Scroll Does Not Change Viewport Origin

After scrolling, a click near the window top still has a small clientY.

JavaScript
document.addEventListener("click", function (e) {
  console.log("clientY:", e.clientY);
  console.log("pageY:", e.pageY);
  console.log("scrollY:", window.scrollY);
});
// After scrolling down, click near the top of the window:
// clientY ≈ small; pageY ≈ scrollY + clientY
Try It Yourself

How It Works

  1. Viewport top stays 0. Scroll does not move that origin (MDN).
  2. pageY includes scroll. Roughly scrollY + clientY.
  3. Use client for on-screen UI. Fixed overlays, menus, drag in view.
  4. Use page for document layout. Absolute positions in long pages.

Example 3 — Synthetic MouseEvent

Set clientY when creating an event in code.

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

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

How It Works

  1. Pass options to the constructor. Include clientX and clientY.
  2. Read-only on the instance. Values match what you set.
  3. Useful for tests. Dispatch without a real pointer.
  4. Default is 0. If you omit them, both stay 0.

Example 4 — clientY vs pageY

Log both on click, plus window.scrollY.

JavaScript
document.addEventListener("click", function (e) {
  console.log({
    clientY: e.clientY,
    pageY: e.pageY,
    scrollY: window.scrollY
  });
});
Try It Yourself

How It Works

  1. At scroll 0 they often match. Same origin when not scrolled.
  2. After scroll they diverge. pageY grows; clientY stays viewport-based.
  3. Log scrollY too. Makes the difference obvious.
  4. Pick the right system. Viewport UI vs document layout.

Example 5 — Viewport Zone Check

Classify clicks as top / middle / bottom of the viewport.

JavaScript
document.addEventListener("click", function (e) {
  const h = window.innerHeight;
  let zone;
  if (e.clientY < h / 3) zone = "top";
  else if (e.clientY < (2 * h) / 3) zone = "middle";
  else zone = "bottom";

  console.log(e.clientY, zone);
});
Try It Yourself

How It Works

  1. Use innerHeight. Current viewport height.
  2. Compare clientY to thirds. Pure viewport math.
  3. Scroll does not shift zones. Top third of the window stays top.
  4. Handy for UI. Sticky bars, lazy reveal, gesture regions.
Compatibility

Browser Support

MouseEvent.clientY is Baseline Widely available (MDN, since July 2015). Safe for all modern mouse and pointer UIs.

✓ Baseline · Widely available

MouseEvent.clientY

Supported across Chrome, Firefox, Safari, Edge, Opera, and legacy IE. Read-only viewport Y in CSS pixels.

99% Browser support
Google Chrome clientY · full support
Full support
Microsoft Edge clientY · Chromium
Full support
Apple Safari clientY · full support
Full support
Mozilla Firefox clientY · full support
Full support
Opera clientY · full support
Full support
Internet Explorer clientY · legacy
Legacy support
MouseEvent.clientY Excellent

Bottom line: Use freely for viewport positioning. Switch to pageY when you need document coordinates after scroll.

Frequently Asked Questions

A read-only number: the vertical mouse position in CSS pixels relative to the browser viewport (visible window), not the full page document (MDN).
No. MDN marks MouseEvent.clientY as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
clientY is measured from the top of the viewport and ignores page scroll. pageY is measured from the top of the document and grows when you scroll down.
screenY is relative to the entire screen (monitor). clientY is relative to the browser viewport only.
Because the viewport’s top edge is always Y = 0 for client coordinates. Scrolling the document does not move that edge (MDN).
Pass clientY (and usually clientX) in MouseEvent options, for example new MouseEvent("click", { clientX: 120, clientY: 40 }).

Next: ctrlKey

Learn how event.ctrlKey reports whether the Control key was pressed.

ctrlKey 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)

10 people found this page helpful

JavaScript MouseEvent clientX Property JavaScript MouseEvent ctrlKey Property