比较offsetX, pageX,clientX,screenX的区别

之前一直没有把offset,page,client和screen这几个属性弄得很清楚,今天花了点时间算是大体上了解了这几个属性的区别,所以把我了解到的写出来,也算是做个总结。

首先我们来看看这几个属性的解释:
1.offsetX:鼠标相对于事件源元素的X坐标,只有IE事件有这2个属性,标准事件没有对应的属性
2.pageX: 鼠标指针的位置,相对于文档的左边缘
3.clientX:返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。
4.screenX:返回事件发生时鼠标指针相对于屏幕的水平坐标。

光看这些文字说明可能不是很直观,反正我看这些的时候是一脸懵13

可能把这些属性都画在一张图上,能更直观
上图!上图!上图!
比较offsetX, pageX,clientX,screenX的区别_第1张图片

看到这张图后,我相信大家对offsetX,clientX,screenX都很明白了。
看到这些我相信大家都会有疑问,pageX呢?pageX去哪了?别急,我们现在就来讨论pageX。

当页面内容小于屏幕分辨率,即页面不能左右滑动时,pageX的值和clientX的值是一样的,只有在页面内容大于屏幕分辨率时,pageX和clientX的值就不一致了,这时的pageX值等于 事件源距离浏览器左边距的X轴距离加上滑动隐藏的距离

最后感谢这篇文字,看了之后让我受益匪浅:链接地址

你可能感兴趣的:(Web前端)