screenX,screenY : 顾名思义,就是鼠标相对于 屏幕 的坐标位置是多少。
clientX,clientY : 鼠标相对于客户端区的坐标位置是多少。客户端区指的就是你浏览器的内容区(除去任何与你浏览的网页无关的东西,比如导航栏,工具栏,URL),无论你的页面怎样滚动,客户端区就那么大(就是那么一个框),其坐标值是不会随着页面的滚动而发生变化的。这一点跟 screenX,screenY 有点类似,可以放在一起记忆。
pageX,pageY : page就是页面嘛,说白了,就是一张纸铺在了浏览器上,那么我们的鼠标位置当然就是相对于这张纸的位置了,如果我们这张纸太大,浏览器没有办法显示完全,那么浏览器就会给页面增加一个滚动条上去,那么 我们在滚动滚动条时,当前鼠标的坐标位置当然会发生变化了。
offset().left,offset().top : 获取元素相对于文档(document)的位置。文档也是一张纸,获取元素位置时,是相对于纸来说的,不是相对于你屏幕,也不是相对于其他任何东西。