彻底弄懂事件的 pageY、clientY、screenY、scrollY、offsetY

2,387 阅读1分钟

继上一篇 clientXXX 系列之后,我又遇到了 clientY ...,真是不秃不死心,为了以后在开发中不再去看文档,我写下这篇博客记录一下。

  • event.pageY:触点(或者鼠标)相对于 HTML 文档上边沿的的 Y 坐标,与是否会滚动无关
  • event.clientY:触点相对于内容可视区域(当前窗口下)的 Y 坐标,会根据用户对可见视区的缩放行为而发生变化
  • event.screenY:触点相对于显示屏上边沿的 Y 坐标,不包含页面滚动的偏移量
  • window.scrollY:在垂直方向已滚动的像素值
  • event.offsetY:鼠标相对于事件源元素的 Y 坐标,只有 IE 有这个属性

需要注意的是 scrollY 是 Window 对象上面的属性,offsetY 只在 IE 上有效。

我用 keynote 画了一张图让你一眼就能看出来这几个属性的区别:

这一篇内容真的少,写完继续看我的组件了。。。