JavaScript中的layerX和offsetX之间的区别

Question

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

我很了解这两个，但有一些像e.layerX和e.offsetX。这两个对我来说不是很清楚。

有人可以为我解释这两个坐标吗？

Answer 1

offsetX / offsetY是Microsoft对鼠标事件对象的简洁扩展，是指鼠标指针相对于目标元素的位置。可悲的是，它们并没有被Firefox实现，并且其他浏览器之间的不一致是什么应该是原点：IE认为它是内容框，而Chrome，Opera和Safari 填充框（这更有意义，因为它与绝对定位元素的原点相同）。

layerX / layerY是基于Gecko的浏览器定义的MouseEvent个对象的属性（Firefox等人）。有人说他们是offsetX / offsetY的替代品 - 他们不是。它们是鼠标相对于“最接近定位的元素”的位置，即position样式属性不是static的元素。如果它静态定位，那不是目标元素。

他们得到了Chrome和Opera的支持，但他们已被弃用，很快就会被删除。所以忘了他们。

Answer 2

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

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