JavaScript MouseEvent layerY Property

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

Definition

event.layerY is a read-only number: the vertical pointer position relative to the current layer (MDN).

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

Syntax

Use event.layerY. Start with this line.

JavaScript
event.layerY
CallWhat it does
event.layerYPrimary signature.

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

Library declarations
JavaScript
event.layerY

Parameters

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

Return Value

Return ValueDescription
*Integer px (when supported)

JavaScript Examples

Example 1 — Read layerY on Click

Log the value when supported.

JavaScript
document.addEventListener("click", (e) => {
  if (!("layerY" in e)) {
    console.log("layerY not supported");
    return;
  }
  console.log(e.layerX, e.layerY);
});
Try It Yourself

How It Works

  1. Listen for clicks. Any mouse event that exposes coords works.
  2. Feature-detect. "layerY" in e avoids surprises.
  3. Read the number. Vertical px relative to the layer.
  4. Pair with layerX. Same rules on the horizontal axis.

Example 2 — layerY vs pageY

On a plain page they often match; a positioned box can diverge.

JavaScript
box.addEventListener("mousedown", (e) => {
  console.log("layerY:", e.layerY);
  console.log("pageY:", e.pageY);
  console.log("offsetY:", e.offsetY);
  // plain box: layerY ≈ pageY
  // positioned box: layerY often differs from pageY
});
Try It Yourself

How It Works

  1. pageY. Document Y including scroll.
  2. layerY. Document-like until a positioned ancestor changes the origin.
  3. offsetY. Always relative to the event target’s padding edge.
  4. Compare in DevTools. Click both plain and positioned boxes.

Example 3 — Prefer Standard Coords

Use layerY only as a curiosity; ship offsetY / pageY.

JavaScript
function localY(e) {
  // production path — standard
  return e.offsetY;
}

function layerOrPageY(e) {
  // demo / legacy path
  return "layerY" in e ? e.layerY : e.pageY;
}

el.addEventListener("click", (e) => {
  console.log("use:", localY(e), "legacy:", layerOrPageY(e));
});
Try It Yourself

How It Works

  1. Pick a standard API. offsetY for element-local hit testing.
  2. Keep a fallback helper. Useful when exploring old code.
  3. Do not depend on layerY alone. Non-standard support varies.
  4. Teach both. Know it when you see it; prefer standards when you write it.
Compatibility

Browser Support

MouseEvent.layerY is marked Non-standard on MDN. Engines may implement it, but it is not a safe production baseline like offsetY / pageY.

✓ Non-standard

MouseEvent.layerY

Vertical coordinate relative to the current layer. Non-standard — feature-detect and prefer offsetY, pageY, or clientY for new code.

Varies Non-standard
Google Chrome Supported*
Partial
Microsoft Edge Supported*
Partial
Mozilla Firefox Supported*
Partial
Apple Safari Supported*
Partial
Opera Supported*
Partial
Internet Explorer Legacy
Partial
layerY Use with care

Bottom line: Educational / legacy reading only for most apps. See the MDN layerY reference.

Frequently Asked Questions

It is a read-only number: the vertical mouse coordinate relative to the current layer. Outside positioned elements it is often similar to pageY; inside a positioned element it is relative to that element’s top-left.
MDN marks MouseEvent.layerY as Non-standard on the MouseEvent interface. It is not labeled Deprecated or Experimental, but you should not rely on it in production cross-browser code — prefer offsetY, pageY, or clientY.
pageY is the document Y including scroll. layerY also accounts for scroll, but when the event is inside a positioned element, layerY is relative to that positioned element instead of the whole document.
Prefer standard properties: offsetY for coordinates relative to the event target, pageY for document coordinates, or clientY for viewport coordinates.
Support is limited and non-standard. Always feature-detect (for example "layerY" in event) and provide a fallback using pageY or offsetY.
Yes. layerX is the horizontal counterpart with the same non-standard status and positioning rules.

Next: metaKey

Check whether the Meta / Command key was pressed for the event.

metaKey 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 layerX Property JavaScript MouseEvent metaKey Property