javascript - JavaScript 中 layerX 和 offsetX 的区别

Question

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

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

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

Answer 1

offsetX/offsetY 是 Microsoft 对鼠标事件对象的巧妙扩展，表示鼠标指针相对于目标元素的位置。遗憾的是，Firefox 没有实现它们，并且其他浏览器之间对于原点应该是什么存在不一致:IE 认为它是content 框，而 Chrome、Opera 和 Safari 是 padding 框(这更有意义，因为它与绝对定位元素的来源相同)。

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

Chrome 和 Opera 支持它们，但它们 (layerX/layerY) are deprecated并将很快被删除。所以忘掉它们吧。