JavaScript MouseEvent y Property

What You’ll Learn

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

Introduction

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

document.addEventListener("mousemove", (event) => {
  console.log(event.y);       // same as event.clientY
  console.log(event.clientY); // viewport Y in CSS pixels
});

Understanding the Property

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

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

📝 Syntax

const y = mouseEvent.y;

Value

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

⚖️ y vs Other Y Coordinates

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

Examples Gallery

Examples follow MDN MouseEvent.y and the related clientY 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.y);
  console.log(e.clientY);
  console.log(e.y === e.clientY); // true when both are numbers
});

96
96
true

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

console.log(event.clientY); // 40
console.log(event.y);       // 40 (alias)
console.log(event.y === event.clientY); // true

40
40
true

document.addEventListener("click", (e) => {
  console.log({
    y: e.y,
    clientY: e.clientY,
    pageY: e.pageY,
    scrollY: window.scrollY
  });
  // y and clientY match; pageY ≈ clientY + scrollY
});

{
  y: 120,
  clientY: 120,
  pageY: 120,
  scrollY: 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 clientY).
• 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 clientY.
• Related: x, clientY, clientX, MouseEvent(), JavaScript hub.

💡 Best Practices