ToC
TL;DR:
- screenX/Y: 鼠标相对于整个显示屏幕的坐标位置, 不会因为滚动条的而改变;
- clientX/Y: 鼠标相对于浏览器可视区域坐标位置, 不会因为滚动条的而改变;
- offsetX/Y: 鼠标相对于当前元素(事件源)的坐标位置, 不会因为滚动条的而改变;
- pageX/Y: 鼠标相对于整个页面的坐标位置, 会因为滚动条的而改变;
注意: 如果存在双屏的情况下,screenX/Y 要考虑到屏幕顺序的问题,如果主屏在右侧,而副屏在左侧,那么 screenX 的值就会是负数,竖屏的情况下,screenY 的值也会是负数。
你可以随时滚动页面,然后点击下面的四个方块,看看每个方块的值是多少。