【发布时间】：2014-04-22 10:47:50
【问题描述】：
JavaScript 有不同的坐标系，例如 e.clientX、e.screenX。
我很理解这两个，但是有一些像 e.layerX 和 e.offsetX。这两个对我来说不是很清楚。
谁能帮我解释一下这两个坐标？
【问题讨论】：
标签： javascript coordinate-systems
【发布时间】：2014-04-22 10:47:50
【问题描述】：
offsetX/offsetY 是微软对鼠标事件对象的巧妙扩展，表示鼠标指针相对于目标元素的位置。遗憾的是，它们并没有被 Firefox 实现，并且其他浏览器之间对于起点应该是什么不一致：IE 认为它是 content 框，而 Chrome、Opera 和 Safari 是 padding 框（这更有意义，因为它与绝对定位元素的来源相同）。
layerX/layerY 是基于 Gecko 的浏览器（Firefox 等）定义的 MouseEvent 对象的属性。有人说它们是offsetX/offsetY 的替代品——它们不是。它们是鼠标相对于“最近定位元素”的位置，即position 样式属性不是static 的元素。如果它是静态定位的，那不是目标元素。
Chrome 和 Opera 支持它们，但它们 (layerX/layerY) are deprecated 很快就会被删除。所以忘了他们吧。
【讨论】：
-
offsetX/offsetY从 v39 开始就在 Firefox 中。 -
当 offset 和 layer 被弃用时，如果有的话，什么会取代它们？
-
我认为@MaxArt 意味着
layerX和layerY已被弃用，不应使用。offsetX和offsetY会留下来。 -
显然，
layerX和layerY今年终于贬值了，已经不行了。切换到offsetX和offsetY。工作正常！
LayerX 和 LayerY 分别检索鼠标指针相对于触发事件的元素的最近定位祖先元素左上角的 x 坐标和 y 坐标。
OffsetX, OffsetY 设置或获取鼠标指针相对于触发事件的元素的 offsetParent 元素左上角的 x 坐标、y 坐标。 偏移父元素返回对 DOM 层次结构中最近的祖先元素的引用，从该元素计算当前元素的位置。
【讨论】：