由于元素相对于视口（viewport）的位置，会随着页面滚动变化，因此表示位置的四个属性值，都不是固定不变的。如果想得到绝对位置，可以将 left 属性加上 window.scrollX ， top 属性加上 window.scrollY。
摘自《阮一峰 JavaScript 教程》
四 鼠标事件
MouseEvent 接口
let event = new MouseEvent('click', { // ... })
通过 addEventListener 添加的 click 事件所产生的事件对象也是 MouseEvent 实例。
let box = document.querySelector('.box') box.addEventListener('click', (e) => { console.log(e) // 事件对象 })
这个事件对象，也就是 MouseEvent 实例，有很多属性，这里来简单分析一下。
MouseEvent.clientX 和 MouseEvent.clientY
只读属性
分别返回鼠标位置相对于 浏览器窗口 左上角的水平坐标和垂直坐标。（不受滚动距离的影响）
可以这样理解：
client 本来就是客户端的意思，web 中的客户端就是浏览器，那 clientX 和 clientY 自然就是相对于浏览器的位置了。
这两个属性还分别有一个别名 MouseEvent.x 和 MouseEvent.y 。
MouseEvent.screenX，MouseEvent.screenY
只读属性
分别返回鼠标位置相对于 屏幕（显示器屏幕区域） 左上角的水平坐标和垂直坐标。
screen 是屏幕的意思，所以，你懂的。
MouseEvent.offsetX，MouseEvent.offsetY
只读属性
分别返回鼠标位置相对于 目标节点（即当前元素） 左上角 padding 边缘 的 水平距离和垂直距离。
offset 有偏移的意思，所以这里也可以理解为鼠标位置相对于目标元素内部左上角的偏移值，和目标元素本身以及外部的元素都无关。
那 「padding 边缘」是什么意思呢？
我们拿图说话：
上图中三个元素分别有红蓝绿三种边框来区分，红蓝边框宽度为 1px ， 绿边框为 30px 。每个元素都有 padding 值。具体代码如下：
<!-- HTML --> <body> <div> <div>Hello</div> </div> </body> /* css */ body { border: 1px solid red; margin: 0; padding: 20px; } .parent { border: 1px solid blue; padding-top: 50px; } .hello { width: 100px; height: 100px; padding: 100px; border: 30px solid green; }
我们给 hello 元素添加一个 click 时间监听函数：
// js let hello = document.querySelector('.hello') hello.addEventListener('click', (e) => { console.log(e) console.log(e.offsetX) console.log(e.offsetY) })
分别点击 hello 元素的绿色边框和空白区域，会发现前者的值为负数，后者的值为整数，且都是相对空白区域的左上角开始计算的。
这就是我们一开始提到的 「鼠标位置相对于 目标节点（即当前元素） 左上角 padding 边缘 的 水平距离和垂直距离」 这句话的意思。
MouseEvent.pageX，MouseEvent.pageY
只读属性
分别返回鼠标位置相对于文档左上角的距离。（包括滚动距离）
MouseEvent.movementX，MouseEvent.movementY
只读属性
返回当前位置与上一个 mousemove 事件之间的水平距离和垂直距离。
很明显这两个属性和 mousemove 事件肯定有着密切的关系，所以我们再了解一下 mousemove 事件：