pageX,clientX,screenX,offsetX 记录

最近在写一个可拖拽的画布功能，所以用到获取位置信息较多，由于基础不扎实忘了一些，容易混淆的API，在这里记下pageX,clientX,screenX,offsetX区别

pageX/pageY:

鼠标相对于整个页面的X/Y坐标。
注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。
特别说明：IE不支持！
clientX/clientY：
事件发生时鼠标在浏览器内容区域的X/Y坐标（不包含滚动条）。
浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也就是说需要拖动滚动条才能看到的区域不算。
当你将浏览器窗口缩小时，clientX/clientY的最大值也会缩小，但始终，它们的最大值不会超过你浏览器可视区域。
特别说明：IE下此属性不规范，它们的最小值不是0而是2，也就是说IE下的clientX/clientY比火狐下始终大2px。
screenX/screenY
鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率。
offsetX/offsetY:
得出的结果跟pageX/pageY一样，既然如此，它有什么存在价值？因为：
特别说明：只有IE支持！相当于IE下的pageX,pageY。

e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft = e.pageX
e.clientY + document.documentElement.scrollTop  - document.documentElement.clientTop = e.pageY