总图

不包含pageX、pageY

offsetX 和 offsetY

参照点：边框内的左上角为原点

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

• offsetY：鼠标点击位置相对于触发事件对象的垂直距离

clientX和clientY

参照点：浏览器显示区域（内容区域）左上角

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

• clientY：鼠标点击位置相对于浏览器可视区域的垂直偏移量（不会计算垂直滚动条的距离）

x 和 y

等同于clientX和clientY

screenX 和 screenY

参照点：电脑屏幕左上角

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

• screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量

pageX和pageY

参照点：网页的左上角为原点（注意：网页可能向下、向右滚动）

• pageX：鼠标点击位置相对于网页左上角的水平偏移量，也就是clientX加上水平滚动条的距离

• pageY：鼠标点击位置相对于网页左上角的垂直平偏移量，也就是clientY加上垂直滚动条的距离

layerX和layerY（复杂）

参考点：

1. 元素自身 position 属性 不是 static，自身的左上角为原点
2. 元素自身 position 属性 是 static，那么会向上寻找离得最近的 position 不是 static 的元素，以该元素的左上角为原点
3. 如果父元素的 position 都是 static，那么以body的左上角为原点

参考：
https://blog.csdn.net/hj0556/article/details/106538083
https://www.cnblogs.com/131362wsc/p/17108726.html
https://www.cnblogs.com/jiangxiaobo/p/6593584.html
https://segmentfault.com/a/1190000043478248
https://blog.csdn.net/Charissa2017/article/details/103863588

原文出处：/show_1IX8PZTYcEll.html