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几乎同时进行移动。
以上：如果存在错误或误解，
欢迎大神门指出！
扫一扫
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
