蓝色标注是 clientX/Y：他总是你浏览器的左上角为基础参考点，如果你的浏览器窗口变小而且拖动到屏幕的任何位置，然后你去取浏览器左上角总是返回(0,0)，就算你的浏览器视窗里面的页面内容已经长到超出浏览器窗口的可视区域，向上或者向右滚动了很多区域，也不会影响clientX/Y的值，所以这个值适合用来计算相对于浏览器可视区域的坐标控制计算；

小二儿，先上文字~

浏览器支持：这2个属性不是标准属性，但得到了广泛支持，IE 事件中没有这2个属性；

浏览器支持：标准事件和 IE 事件都定义了这2个属性；IE 下此属性不规范，它们的最小值不是0而是2，也就是说 IE 下的 clientX/clientY 比火狐下始终大 2px;

取值范围：浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视区域，也就是说需要拖动滚动条才能看到的区域不算；当你将浏览器窗口缩小时，clientX/clientY 的最大值也会缩小，但始终，它们的最大值不会超过你浏览器可视区域。

第一幅图标示了因为页面过大滚动后产生的效果,第二幅图是未滚动状态的说明：

说明一下，我这里已经不会再去讲任何已经死去的IE的奇怪诡异特征了，超级变态网页私服，比如还有什么 offsetX/offsetY/layerX/layerY，别再浪费时间去想这些了；
2. pageX 和 pageY

描述：鼠标相对于整个页面的 X/Y 坐标；

3. screenX 和 screenY

描述：鼠标相对于用户显示器屏幕左上角的 X/Y 坐标；

第二幅图解释:

黄色标注是 screenX/Y：他总是以你的物理屏幕的视窗(viewport)为参考点，也就是你的显示器的位置，显示器是一个绝对不动的参考点；他不会因为现实的内容而有改变；
pageX, pageY, screenX, screenY, clientX and clientY 返回的是像素'css pixels'.

浏览器支持：标准事件和 IE 事件都定义了这2个属性；

这里还有一个重要的特征在图上面，就是 scrollTop，他是 pageY 相对于可视化边界被 scroll 滚出去的部分，scrollLeft 同理，理解起来还是非常简单的。

取值范围：整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那 pageX/pageY 的最大值就是它们了；

小二儿，上图~

总是被 JavaScript 的 event 对象中的 clientX, offsetX, screenX, pageX 弄得晕头转向，借用 stackoverflow 上面的两个图来表示一下：
1. clientX 和 clientY

描述：鼠标相对于浏览器内容区域的 X/Y 坐标，内容区域不包括工具栏和滚动条；

取值范围：最大值不会超过屏幕分辨率；

红色标注是 pageX/Y：他总是相对于页面内容区域的最顶端(Y)和最左端(X)为绝对参考点，比如上面的页面比浏览器的可视面积大，会产生滚动条，你上下或者左右滚动会改变可视区域，坐标也会随之改变。