小议layerX/Y offsetX/Y 的区别 In Chrome

大家都知道在chrome中获取鼠标位置信息的途径有很多。有screenX/Y、clinetX/Y、pageX/Y、layerX/Y、offsetX/Y。这里面的区别网上的大神都有很多的阐述了，我就不详细探究了。总结如下：

1. screen是获取鼠标相对于屏幕原点的位置
2. client是获取鼠标相对于页面可视区域原点的位置，因为是相对于可视区域的所有与滚动条无关。
3. page是获取鼠标相对于整个页面的原点的位置，这个就和滚动条位置有关了。
4. layer和offset在chrome中都是获取鼠标相对于元素原点的位置，这里的原点是以border原点计算的。

那layer和offset在chrome中难道就没有区别了吗？

当然不会这样。

当我们使用transform进行2D变换时，这两者的区别就显现出来了。一个会受变换影响而另一个则不会。

例如，一个DIV宽高都是100px。

• 我们将鼠标移动到这个矩形的中心，得到的数据为 layer(50,50) offset(50,50)。
• 如果给这个DIV进行一次2D变换添加scale(0.5)，即缩小50%，那么此时我们再将鼠标移动到这个矩形的中心我们得到的数据为 layer(25,25) offset(50,50)

具体的区别相信大家都能体会出来了吧。