layerX && layerY
转载：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>