JavaScript MouseEvent offsetY Property

What You’ll Learn

MouseEvent.offsetY is a read-only number: how far the pointer is from the top padding edge of the element that received the event. Learn when to use it instead of clientY / pageY, how it pairs with offsetX, and five try-it labs.

Introduction

Sampling a row on a canvas, placing a pin on a photo, or measuring a click inside a card needs “how far down inside this element?” That is offsetY (vertical), paired with offsetX (horizontal)—coordinates relative to the target’s padding box.

box.addEventListener("click", (event) => {
  console.log(event.offsetY); // pixels from the target's top padding edge
});

Understanding the Property

MDN: offsetY provides the offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.

• Instance — read event.offsetY in a handler.
• Number — CSS pixels; a floating-point double.
• Target-relative — measured from event.target’s top padding edge.
• Read-only — set via constructor options on synthetic events only.

📝 Syntax

const y = mouseEvent.offsetY;

Value

A double floating-point value in pixels (MDN). Early versions of the specification defined this as an integer; modern browsers report a floating-point number.

⚖️ offsetY vs Other Y Coordinates

Pair offsetY with offsetX for a full point inside the target. Prefer offsetY over non-standard layerY when you need element-local coordinates.

Examples Gallery

Examples follow MDN MouseEvent.offsetY. Click inside boxes and compare local vs viewport Y coordinates in the try-it labs.

const box = document.querySelector("#box");
const log = document.querySelector("#log");

box.addEventListener("click", (e) => {
  log.textContent = `offsetX: ${e.offsetX}, offsetY: ${e.offsetY}`;
});

offsetX: 24, offsetY: 18

box.addEventListener("click", (e) => {
  console.log({
    offsetY: e.offsetY, // relative to the box
    clientY: e.clientY, // relative to the viewport
    pageY: e.pageY      // relative to the document
  });
});

{
  offsetY: 40,
  clientY: 220,
  pageY: 220
}

const event = new MouseEvent("click", {
  offsetX: 40,
  offsetY: 20,
  bubbles: true
});

console.log(event.offsetX); // 40
console.log(event.offsetY); // 20

40
20

track.addEventListener("click", (e) => {
  const height = track.clientHeight || 1;
  const percent = Math.min(100, Math.max(0, (e.offsetY / height) * 100));
  console.log(`Clicked at ${percent.toFixed(1)}% from the top`);
});

Clicked at 52.3% from the top

const area = document.querySelector("#area");
const dot = document.querySelector("#dot");

area.addEventListener("click", (e) => {
  // area { position: relative }, dot { position: absolute }
  dot.style.left = `${e.offsetX}px`;
  dot.style.top = `${e.offsetY}px`;
});

Dot jumps to the click point inside #area using offsetX / offsetY.

🚀 Common Use Cases

• Drawing or sampling rows on a <canvas> or image.
• Custom vertical sliders and volume meters using click position as a percentage.
• Placing markers, stickers, or hotspots inside a card or map.
• Unit tests that assert a click at a known local vertical point.
• Replacing non-standard layerY with a standard element-local Y.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since December 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Origin is the target’s top padding edge (inside the border).
• Value type is a floating-point double in modern engines.
• Related: offsetX, clientY, layerY, MouseEvent(), Window, JavaScript hub.

💡 Best Practices