JavaScript中的layerX和offsetX之间的区别 [英] Difference between layerX and offsetX in JavaScript

问题描述

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

There are different co-ordinate system for JavaScript, such as e.clientX, e.screenX.

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

I understand those two well, but there are some like e.layerX and e.offsetX. These two are not very clear to me.

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

Can someone explain those two co-ordinates for me?

推荐答案

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

offsetX/offsetY are a neat extension by Microsoft to mouse event objects, and mean the position of the mouse pointer relatively to the target element. Sadly, they're not implemented by Firefox, and there's discordance among the other browsers about what should be the origin point: IE thinks it's the content box, while Chrome, Opera and Safari the padding box (which makes more sense, since it's the same origin of absolutely positioned elements).

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

layerX/layerY are properties of MouseEvent objects defined by Gecko-based browsers (Firefox et al.). Some say they're substitutes for offsetX/offsetY - they're not. They're the position of the mouse relatively to the "closest positioned element", i.e. an element whose position style property is not static. That's not the target element if it's statically positioned.

它们受Chrome和Opera的支持，但它们已被弃用并即将被删除。所以忘了他们。

They're supported by Chrome and Opera, but they're deprecated and going to be removed soon. So forget about them.

这篇关于JavaScript中的layerX和offsetX之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！