MouseEvent: layerX property

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

The MouseEvent.layerX read-only property returns the horizontal coordinate of the event relative to the current layer.

This property takes scrolling of the page into account and returns a value relative to the whole of the document unless the event occurs inside a positioned element, where the returned value is relative to the top left of the positioned element.

Value

An integer value in pixels for the x-coordinate of the mouse pointer, when the mouse event fired.

Examples

html
<p>To display the mouse coordinates please click anywhere on the page.</p>

<div id="d1">
  <span>
    This is an un-positioned div so clicking it will return layerX/layerY values
    almost the same as pageX/PageY values.
  </span>
</div>

<div id="d2">
  <span>
    This is a positioned div so clicking it will return layerX/layerY values
    that are relative to the top-left corner of this positioned element. Note
    the pageX\pageY properties still return the absolute position in the
    document, including page scrolling.
  </span>

  <span>
    Make the page scroll more! This is a positioned div so clicking it will
    return layerX/layerY values that are relative to the top-left corner of this
    positioned element. Note the pageX\pageY properties still return the
    absolute position in the document, including page scrolling.
  </span>
</div>

<div id="d3">
  <form name="form_coords" id="form1">
    Parent Element id: <input type="text" name="parentId" size="7" /><br />
    pageX: <input type="text" name="pageXCoords" size="7" /> pageY:
    <input type="text" name="pageYCoords" size="7" /><br />
    layerX: <input type="text" name="layerXCoords" size="7" /> layerY:
    <input type="text" name="layerYCoords" size="7" />
  </form>
</div>
css
#d1 {
  border: solid blue 1px;
  padding: 20px;
}

#d2 {
  position: absolute;
  top: 180px;
  left: 80%;
  right: auto;
  width: 40%;
  border: solid blue 1px;
  padding: 20px;
}

#d3 {
  position: absolute;
  top: 240px;
  left: 20%;
  width: 50%;
  border: solid blue 1px;
  padding: 10px;
}
js
function showCoords(evt) {
  const form = document.forms.form_coords;
  const parentId = evt.target.parentNode.id;
  form.parentId.value = parentId;
  form.pageXCoords.value = evt.pageX;
  form.pageYCoords.value = evt.pageY;
  form.layerXCoords.value = evt.layerX;
  form.layerYCoords.value = evt.layerY;
}

window.addEventListener("mousedown", showCoords);

Specifications

This property is not part of any specification.

Browser compatibility