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是MouseEvent由基于Gecko的浏览器定义的对象的属性(Firefox等人).有人说他们是替代offsetX/ offsetY- 他们不是.它们是鼠标相对于"最接近定位的元素"的位置,即其position样式属性不是的元素static.如果它静态定位,那不是目标元素.

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

Answer 2

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

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