JS clientX、offsetX、pageX、screenX

因为要写拖拽、拉伸，所以去查了有关这方面的博客，然后发现每一篇博客说的都不一样。。。，我的这篇博客是按照我自己的理解来解释的，有错误的话，欢迎指正【我也不能肯定100%正确】

一：图形解释

 二：书面解释【根据英文单词意思，也可以猜个八九不离十】

screen：屏幕

1.作用对象：鼠标点

2.坐标中心点：电脑屏幕左上角

3.screenX：鼠标点距离电脑屏幕左边的距离；screenY：鼠标点距离电脑屏幕上面的距离

client：客户端管理器、客户机、客户端

1.作用对象：鼠标点

2.坐标中心点：浏览器窗口左上角

3.clientX：鼠标点距离浏览器窗口左边的距离；clientY：鼠标点距离浏览器窗口上面的距离

offset：偏离

1.作用对象：鼠标点所在的元素

2.坐标中心点：只能说是左上角，因为不同的浏览器，有的坐标中心点是浏览器窗口，有的就是浏览器边框里面的左上角，这个根据不同的浏览器中心坐标点不同

3.offsetX：鼠标所在元素距离左边的距离；offsetY：鼠标所在元素距离上面的距离

page：页面

1.作用对象：鼠标点

2.坐标中心点：文档页面的左上角，分情况

（1）浏览器没有滚动条的时候，page的值就和client的值是一致的，此时page的坐标中心点的位置和client的坐标中心点位置宠重合都是浏览器窗口的左上角

（2）当浏览器有滚动条的时候，client的中心坐标点还是浏览器窗口的位置，但是page的中心坐标点就不是了，page的坐标点是滚动条最上面的文档的左上角的位置【不好叙述，汗颜】

3.pageX：鼠标距离文档左边的距离；pageY：鼠标距离文档上面的距离