[client|screen|offset|page]X/Y 坐标

TL;DR:

  • screenX/Y: 鼠标相对于整个显示屏幕的坐标位置, 不会因为滚动条的而改变;
  • clientX/Y: 鼠标相对于浏览器可视区域坐标位置, 不会因为滚动条的而改变;
  • offsetX/Y: 鼠标相对于当前元素(事件源)的坐标位置, 不会因为滚动条的而改变;
  • pageX/Y: 鼠标相对于整个页面的坐标位置, 会因为滚动条的而改变;
如果存在双屏的情况下，screenX/Y 要考虑到屏幕顺序的问题，如果主屏在右侧，而副屏在左侧，那么 screenX 的值就会是负数，竖屏的情况下，screenY 的值也会是负数。

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