JavaScript 中 layerX 和 offsetX 的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23217333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between layerX and offsetX in JavaScript
提问by AL-zami
There are different co-ordinate system for JavaScript, such as e.clientX, e.screenX.
JavaScript 有不同的坐标系，例如 e.clientX、e.screenX。
I understand those two well, but there are some like e.layerX and e.offsetX. These two are not very clear to me.
我很理解这两个，但有一些像 e.layerX 和 e.offsetX。这两个我不是很清楚。
Can someone explain those two co-ordinates for me?
有人可以为我解释这两个坐标吗？
回答by MaxArt
offsetX/offsetYare a neat extension by Microsoft to mouse event objects, and mean the position of the mouse pointer relatively to the target element. Sadly, they're not implemented by Firefox, and there's discordance among the other browsers about what should be the origin point: IE thinks it's the contentbox, while Chrome, Opera and Safari the paddingbox (which makes more sense, since it's the same origin of absolutely positioned elements).
offsetX/offsetY是微软对鼠标事件对象的巧妙扩展，表示鼠标指针相对于目标元素的位置。遗憾的是，它们不是由 Firefox 实现的，并且其他浏览器之间在原点应该是什么方面存在不一致：IE 认为它是内容框，而 Chrome、Opera 和 Safari 是填充框（这更有意义，因为它是绝对定位元素的相同原点）。
layerX/layerYare properties of MouseEventobjects defined by Gecko-based browsers (Firefox et al.). Some say they're substitutes for offsetX/offsetY- they're not. They're the position of the mouse relatively to the "closest positioned element", i.e. an element whose positionstyle property is not static. That's not the target element if it's statically positioned.
layerX/layerY是MouseEvent基于 Gecko 的浏览器（Firefox 等）定义的对象的属性。有人说它们是offsetX/ 的替代品offsetY- 他们不是。它们是鼠标相对于“最近定位的元素”的位置，即position样式属性不是的元素static。如果它是静态定位的，那不是目标元素。
They're supported by Chrome and Opera, but they're deprecated and going to be removed soon. So forget about them.
Chrome 和 Opera 支持它们，但它们已被弃用并很快将被删除。所以忘记他们吧。
回答by Rhythm Walia
LayerX and LayerY Retrieves the x-coordinate, y-coordinate respectively of the mouse pointer relative to the top-left corner of the closest positioned ancestor element of the element that fires the event.
LayerX 和 LayerY 分别检索鼠标指针相对于触发事件的元素的最近定位的祖先元素的左上角的 x 坐标、y 坐标。
OffsetX, OffsetY sets or retrieves the x-coordinate, y-coordinates of the mouse pointer relative to the top-left corner of the offsetParent element of the element that fires the event. Offset Parent element returns a reference to the closest ancestor element in the DOM hierarchy from which the position of the current element is calculated.
OffsetX, OffsetY 设置或获取鼠标指针相对于触发事件的元素的 offsetParent 元素左上角的 x 坐标、y 坐标。Offset Parent 元素返回对 DOM 层次结构中最近的祖先元素的引用，从中计算当前元素的位置。
