JavaScript中layerX和offsetX的区别

Question

JavaScript有不同的坐标系，例如e.clientX, e.screenX。

我对这两个很清楚，但是像e.layerX和e.offsetX这样的东西对我来说不是很清楚。

有人能为我解释一下这两个坐标吗？

- AL-zami

---

https://developer.mozilla.org/zh-CN/docs/Web/API/event.layerX - Shadow The Spring Wizard

Answer 1

offsetX/offsetY是Microsoft对鼠标事件对象的一个很好的扩展，表示鼠标指针相对于目标元素的位置。遗憾的是，Firefox没有实现它们，并且其他浏览器也存在不一致的问题：IE认为它是content盒子，而Chrome、Opera和Safari认为是padding盒子（这更有意义，因为绝对定位元素的原点也是相同的）。

layerX/layerY是Gecko-based浏览器（如Firefox等）定义的MouseEvent对象的属性。有人说它们可以替代offsetX/offsetY，但事实并非如此。它们表示鼠标相对于“最近的定位元素”的位置，即position样式属性不为static的元素。如果目标元素是静态定位的话，则不是该元素。

它们受Chrome和Opera支持，但它们(layerX/layerY)已经被弃用，即将被删除。因此，请忘记它们。

- MaxArt

---

offsetX/offsetY自Firefox v39版本以来就存在。 - aleclarson

当偏移量和层被弃用时，如果有替代品，它们将会是什么？ - bigmugcup

我认为@MaxArt的意思是layerX和layerY已经被弃用，不应该再使用。而offsetX和offsetY则仍然保留。 - Gup3rSuR4c

显然，layerX和layerY在今年终于被弃用了，不再起作用。改用offsetX和offsetY。效果很好！ - user9114146

Answer 2

LayerX和LayerY分别检索与触发事件的元素的最近定位祖先元素的左上角相对位置相关的鼠标指针的x坐标和y坐标。

OffsetX和OffsetY设置或检索与触发事件的元素的offsetParent元素的左上角相对位置相关的鼠标指针的x坐标和y坐标。Offset Parent元素返回到从中计算当前元素位置的DOM层次结构中最近的祖先元素的引用。

- Rhythm Walia