JavaScript MouseEvent layerX Property

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

Definition

event.layerX is a read-only number: the horizontal 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.layerX. Start with this line.

JavaScript
event.layerX
CallWhat it does
event.layerXPrimary signature.

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

Library declarations
JavaScript
event.layerX

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 layerX on Click

Log the value when supported.

JavaScript
document.addEventListener("click", (e) => {
  if (!("layerX" in e)) {
    console.log("layerX 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. "layerX" in e avoids surprises.
  3. Read the number. Horizontal px relative to the layer.
  4. Pair with layerY. Same rules on the vertical axis.

Example 2 — layerX vs pageX

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

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

How It Works

  1. pageX. Document X including scroll.
  2. layerX. Document-like until a positioned ancestor changes the origin.
  3. offsetX. 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 layerX only as a curiosity; ship offsetX / pageX.

JavaScript
function localX(e) {
  // production path — standard
  return e.offsetX;
}

function layerOrPageX(e) {
  // demo / legacy path
  return "layerX" in e ? e.layerX : e.pageX;
}

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

How It Works

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

Browser Support

MouseEvent.layerX is marked Non-standard on MDN. Engines may implement it, but it is not a safe production baseline like offsetX / pageX.

✓ Non-standard

MouseEvent.layerX

Horizontal coordinate relative to the current layer. Non-standard — feature-detect and prefer offsetX, pageX, or clientX 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
layerX Use with care

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

Frequently Asked Questions

It is a read-only number: the horizontal mouse coordinate relative to the current layer. Outside positioned elements it is often similar to pageX; inside a positioned element it is relative to that element’s top-left.
MDN marks MouseEvent.layerX 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 offsetX, pageX, or clientX.
pageX is the document X including scroll. layerX also accounts for scroll, but when the event is inside a positioned element, layerX is relative to that positioned element instead of the whole document.
Prefer standard properties: offsetX for coordinates relative to the event target, pageX for document coordinates, or clientX for viewport coordinates.
Support is limited and non-standard. Always feature-detect (for example "layerX" in event) and provide a fallback using pageX or offsetX.
Yes. layerY is the vertical counterpart with the same non-standard status and positioning rules.

Next: layerY

Same layer rules on the vertical axis.

layerY 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 ctrlKey Property JavaScript MouseEvent layerY Property