JavaScript MouseEvent y Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property

Definition

MouseEvent.y is a read-only number: the mouse’s vertical position in CSS pixels, measured from the viewport top edge. Per MDN, it is an alias for clientY.

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

Syntax

Use event.y. Start with this line.

JavaScript
const y = mouseEvent.y;
CallWhat it does
const y = mouseEvent.y;Primary signature.

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

Library declarations
JavaScript
const y = mouseEvent.y;

Parameters

ParameterDescription
Mouse / pointer eventRequired. Source that exposes y

Return Value

Return ValueDescription
*The current value of event.y.

JavaScript Examples

Example 1 — Read y on Move

Print viewport X and Y while the mouse moves.

JavaScript
document.addEventListener("mousemove", (event) => {
  console.log(event.x, event.y);
});
Try It Yourself

How It Works

  1. Listen for moves. Every pointer move fires mousemove.
  2. Read the short names. event.x / event.y are viewport coordinates.
  3. Same as client. Values match clientX / clientY.
  4. Use the numbers. Great for fixed UI, tooltips, and simple hit tests.

Example 2 — Prove y === clientY

Confirm MDN’s alias rule with a one-line equality check.

JavaScript
document.addEventListener("click", (event) => {
  console.log(event.y);
  console.log(event.clientY);
  console.log(event.y === event.clientY);
});
Try It Yourself

How It Works

  1. Click once. The handler runs with a real MouseEvent.
  2. Print both names. y and clientY show the same number.
  3. Compare with ===. true means the alias works in this browser.
  4. Pick one style. Keep y or clientY consistent in your project.

Example 3 — y vs pageY

See when viewport Y and document Y stay equal — and when they diverge.

JavaScript
document.addEventListener("click", (event) => {
  console.log({
    y: event.y,
    clientY: event.clientY,
    pageY: event.pageY,
    scrollY: window.scrollY
  });
});
Try It Yourself

How It Works

  1. Alias pair first. y and clientY stay locked together.
  2. Check scroll. With scrollY === 0, pageY matches too.
  3. Scroll vertically. pageY grows; y stays viewport-based.
  4. Rule of thumb. Fixed overlays → y; document markers → pageY.

Browser & Runtime Support

MouseEvent.y is Baseline Widely available (MDN: since April 2017). It is defined in the CSSOM View Module as an alias of clientY.

✓ Baseline · Widely available

MouseEvent.y

Supported across modern Chrome, Firefox, Safari, and Edge. Same practical availability as clientY for viewport Y.

98% Modern browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Bun Supported · JavaScript runtime
Supported
Deno Supported · JavaScript runtime
Supported
Node.js Supported · Server runtime
Supported
Android WebView Supported · Modern WebView
Full support
MouseEvent.y Excellent

Bottom line: Safe for production. Prefer clientY if your team wants the longer, more explicit name; values match on supporting browsers.

Frequently Asked Questions

It is a read-only number: the vertical mouse position in CSS pixels relative to the browser viewport. MDN documents it as an alias for MouseEvent.clientY.
No. MDN marks MouseEvent.y as Baseline Widely available (since April 2017). It is not Deprecated, Experimental, or Non-standard.
Yes. On supporting browsers, event.y === event.clientY for the same event. Prefer one naming style in a codebase.
y / clientY are measured from the viewport’s top edge and ignore document scroll. pageY is measured from the document’s top edge and grows when you scroll down.
screenY is relative to the entire screen (monitor). y is relative to the browser viewport only.
Pass clientY in MouseEvent options, for example new MouseEvent("click", { clientX: 120, clientY: 40 }). Engines typically expose the same value on event.y.

Next: getModifierState()

Check whether modifier keys like Shift or CapsLock were active for the event.

getModifierState() →

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.

9 people found this page helpful