在平常浏览学习一些前端知识的时候，偶尔会涉及到一些与用户进行交互的小功能，需要获取用户鼠标的点击坐标，看着案例里有时会使用 clientX、clientY，有时又使用的是 offsetX、offsetY 等，依葫芦画瓢，半懂不懂。本文就来总结归纳一下 clientX、pageX、offsetX 和 screenX 之间的区别（clientY、pageY、offsetY 和 screenY 则可照理类推）。
代码准备
首先明确一点，它们都是鼠标事件（MouseEvent）的属性，即当鼠标发生点击（click）或移动（mousemove、mousedown等）时，浏览器会自动将MouseEvent传入到对应的事件监听回调中。
为了验证各个属性之间的区别，我准备了 2 个宽高均为 100px 的方块，其中黄色方块通过绝对定位布置在 left: 100px 和 top: 100px 的地方；为了产生水平和垂直滚动条，让蓝色方块绝对定位在了 left: 100% 和 top: 100% 的位置。然后定义了鼠标移动事件，将各个属性展示出来：
下面就来具体说说各个属性，它们各自第一行的定义均引用自 MDN 文档：
clientX
MouseEvent.clientX 是只读属性，它提供事件发生时的应用客户端区域的水平坐标 (与页面坐标不同)。
clientX 是相较于客户端的，通常就是指浏览器的内容区域（窗口），或者比如码上掘金的这块显示区域，也可以看成是一个客户端。它的特点是不 包括窗口自身控件和滚动条，比如当鼠标指针放在窗口右下角时，横向滚动条在最左边和最右边时，clientX 的值是一样的：
注意，这里说的不包括滚动条，不是指当鼠标指针放到垂直 滚动条上时，测不到正确的 clientX 数值，而是指无论是否存在水平 滚动条，不影响 clientX 的结果：
pageX
pageX 是一个由 MouseEvent 接口返回的相对于整个文档的 x（水平）坐标以像素为单位的只读属性。
pageX 的零点同 clientX 一样，也是在浏览器内容区域的最左边，但是它的值受到滚动条的影响。
- 当水平滚动条位于最左边时，
pageX与clientX一样大：
- 当水平滚动条位于最右边时
pageX就比clientX大，且刚好大了水平滚动的 100px 距离：
offsetX
MouseEvent 接口的只读属性 offsetX 规定了事件对象与目标节点的内填充边（padding edge）在 X 轴方向上的偏移量。
与 clientX 不同的点有 2 方面：
offsetX 受到滚动条的影响
当鼠标指针位于 2 个方块之外的浏览器内容区域内，并且不存在水平滚动条或水平滚动条在最左边时，offsetX 的值与 clientX 的值相同：
而当水平滚动条移到最右边时，可以看到 offsetX 要比 clientX 大，且刚好大了水平滚动的 100px：
offsetX 获取的是相对于触发事件的对象的 x 坐标
当鼠标指针位于蓝色方块内部时，可以看到 offsetX 的值仅为 25。虽然我们监听的是 document.onmousemove，但是由于事件的冒泡，触发 mousemove 事件的其实是蓝色方块，所以 offsetX 的值为相对于蓝色方块最左边的距离：
screenX
screenX 是 MouseEvent 的只读属性，提供鼠标在全局（屏幕）中的水平坐标（偏移量）
screenX 获取的是鼠标指针相对于整个屏幕的 x 坐标。所以当浏览器窗口没有铺满整个屏幕时，我把鼠标指针放在了浏览器内容区域的左上角位置，此时 clientX、pageX 和 offsetX 都接近 0， 但 screenX 的值为 136：
注意，当使用了多显示屏时，水平对齐的屏幕会被视为单个设备。比如我就使用了双显示屏，副屏幕在主屏幕的左边。当我把浏览器放在副屏幕时，screenX 会是个负数：