图解JS事件坐标screenX、clientX、pageX和offsetX的区别

上一篇做原生js做一个图片放大镜的时候，需要获取鼠标坐标，于是我就折在了offsetX上。那么多的鼠标事件真的是又乱又烦银，到底什么场景什么时候该用哪个坐标呢？下面我们来进行一个详细的对比。

• 注：
  1、x是水平偏移量，y是垂直偏移量，本文仅拿x举例，y同理。
  2、监听事件添加到html根元素上。

1、screenX

鼠标点击位置相对于 电脑屏幕左上角 的水平偏移量；

如果浏览器是全屏的，那么screenX、screenY都是为0的。非全屏下screenY不为0的（见下图蓝色箭头部分）。

1.1、调整浏览器将鼠标置于左上角时得到的不同数据

2、clientX

鼠标点击位置相对于 浏览器可视区域 的水平偏移量（不会计算水平滚动的距离）

下面两张图可以明显对比出clientX的特征：

2.1、原始布局，灰色方块margin:100px

2.2、页面水平移动后，同一个点的clientX不变

3、pageX

鼠标点击位置相对于 网页左上角 的水平偏移量（clientX加上水平滚动条的距离）

用图2.1做对比，此时图2.1中鼠标的pageX和pageY也均为0。灰色方块margin:100px，此时移动灰色方块至左边与浏览器左边重合，顶部与浏览器顶部重合如图3.1所示（我真的尽力移动了，但是还是有1px的误差）：

3.1、pageX、pageY受滚动条的影响

眼尖的小伙伴会发现，明明说移动灰色方块到跟浏览器左边重合，即使有1-2px的误差，可是为什么pageX是108px呢？？？—— 因为body默认有8px的margin啊！你把body的margin设置为0以后再try try～

而在放大镜那篇中，获取box的offsetLeft就可以获取到这8px，而为什么这里不能获取这8px呢？这还要从offsetLeft的元素视图属性说起……

4、offsetX

鼠标点击位置相对于 触发事件对象 的水平距离

4.1、两个点的数据居然是一致的？

有意思的事情发生了，灰色方块有100px的margin，但是为何鼠标在灰色方块的左上角时offsetX和offsetY也都是0呢？
这也是我在原生js做一个图片放大镜踩的坑，是我写这篇文章的原因……

offsetX是相对于 触发事件对象 ，然而由于存在事件冒泡和事件捕获机制，如果监听对象内还有对象的话，那么offsetX在该监听事件中不同位置的值都不是唯一的，这就是为啥我用offsetX获取坐标给放大镜做定位的时候，我的放大镜一直来回跑……

总结：

• screenX是相对屏幕，包含了浏览器任务栏等，所以screenY永远是最大的；
• pageX和clientX在无滚动条的情况下是完全相同的；
• offsetX会受到监听目标中嵌套元素的影响，有元素嵌套时谨慎使用。