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

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

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

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

可能把这些属性都画在一张图上，能更直观
上图！上图！上图！

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

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

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