ToC

TL;DR:

• screenX/Y: 鼠标相对于整个显示屏幕的坐标位置, 不会因为滚动条的而改变;
• clientX/Y: 鼠标相对于浏览器可视区域坐标位置, 不会因为滚动条的而改变;
• offsetX/Y: 鼠标相对于当前元素(事件源)的坐标位置, 不会因为滚动条的而改变;
• pageX/Y: 鼠标相对于整个页面的坐标位置, 会因为滚动条的而改变;

注意： 如果存在双屏的情况下，screenX/Y 要考虑到屏幕顺序的问题，如果主屏在右侧，而副屏在左侧，那么 screenX 的值就会是负数，竖屏的情况下，screenY 的值也会是负数。

你可以随时滚动页面，然后点击下面的四个方块，看看每个方块的值是多少。