page,client,offset,layer的区别

pageX/pageY：

相对于浏览器左上的距离。出现滚动条的时候，可以自己调节与浏览器左上的相对距离。

下面看log输出pageY的值。

现在浏览器最大屏幕工作区的高度是1040；

到出现滚动条的时候，每次超出1040px后都会重新对鼠标到浏览器左上角的距离进行获取变为639px

    

clientX/clientY：

也是相对于浏览器左上的的位置，但是一旦出现滚动条后，红色的BOX并不会继续跟着鼠标移动的距离进行移动。 clientX/Y 并没有加上滚动条的距离。如果想达到page的效果。

还是需要加上滚动条的距离。如下（兼容IE8）

clientX+ document.documentElement.scrollLeft||document.body.scrollLeft

clientY+ document.documentElement.scrollLeft||document.body.scrollTop

offsetX/offsetY

offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值

layerX/layerY

IE特有,如果触发元素没有设置绝对定位或相对定位,以页面为参考点,会将border计算在内

也就是当触发元素设置了相对或者绝对定位后,可以重合在一起,几乎相等,唯一不同就是一个从border边缘为参考点,一个以内容为参考点

可以参考下列图，offsetX、layerX几乎同时进行移动。

以上：如果存在错误或误解，

欢迎大神门指出！