先来看第一张图
pageX：事件对象加上滚动距离后的水平偏移量。图中由于水平滚动距离 scrollLeft 为 0，所以这里 pageX 等于 clientX；
pageY：事件对象加上滚动距离后的偏移量。图中由于垂直滚动距离 scrollTop 为 30，所以这里 pageY 大于 clientY；
clientX：事件对象可视区域的水平偏移量；
clientY：事件对象可视区域的垂直偏移量；
scrollTop：事件对象的垂直滚动距离；
scrollLeft：事件对象的水平滚动距离；
pageX大致可以理解为clientX + scrollX；pageY大致可以理解为clientY + scrollY
再来看第二张图
screenX：事件对象距离设备的水平偏移量；
screenY：事件对象距离设备的垂直偏移量；
clientWidth：对象的content宽度；
clientHeight：对象的content高度；
offsetWidth：对象的content + padding + border 三者的宽度。图中每个元素都有 2px 的边框；
offsetHeight：对象的content + padding + border 三者的高度。图中每个元素都有 2px 的边框；
client可以理解为 可视区域 的意思。比如clientX可以这么理解，就是水平能看到的区域的距离（因为滚出去的区域看不到了）；对应到clientWidth，就可以理解为实际可使用的内容的宽度。
而offsetWidth可以和css盒模型的标准盒模型一起记忆。
最后
文笔有限，如果有没有表述清楚的，还请多多包涵，有错误的地方，万望告知，有什么疑问和建议，可以多多交流。
