转载：https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX

UIEvent.layerX

　　非标准

　　这个属性是非标准的属性，并且也没有那个标准说要使用它。

　　如果你要使用它，请不要使用在你的Web产品上。那会不对一些用户起作用的。在不同的浏览器上的实现由许多的兼容性问题。

　　而且，这个属性的行为将来还可能改变。

这个属性会返回这个事件相对于它相应的层的横坐标。

Syntax

var xpos = event.layerX

这里有一段代码，提供给大家用于理解这个属性

Example

<html>

<head>

<title>pageX\pageY & layerX\layerY example</title>

<script type="text/javascript">

function showCoords(evt){

  var form = document.forms.form_coords;

  var parent_id = evt.target.parentNode.id;

  form.parentId.value = parent_id;

  form.pageXCoords.value = evt.pageX;

  form.pageYCoords.value = evt.pageY;

  form.layerXCoords.value = evt.layerX;

  form.layerYCoords.value = evt.layerY;

}

</script>

<style type="text/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;

 }

</style>

</head>

<body onmousedown="showCoords(event)">

<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>

</body>

</html>

layerX

layerX && layerY

UIEvent.layerX