# pageY-clientY-offsetY-layerY
# pageY
鼠标相对于整个页面左上角的位置,不随滑动条移动而变化。
IE 中没有 PageY,可以根据以下方式计算出来:
// 页面具有 DTD,即指定了 DOCTYPE,使用 document.documentElement
// 页面不具有 DTD,即没有指定 DOCTYPE,时,使用 document.body
const doc = document.documentElement || document.body
pageY = clientY + doc.scrollTop - doc.clientTop
页面上的位置 = 可视区域位置 + 页面已经滚动的高度 - 页面 border 高度
1
2
3
4
5
6
7
2
3
4
5
6
7
位置关系可参考:
# clientY
鼠标相对于页面上可视区域左上角的位置,随滑动条移动变化。
# offsetY
鼠标相比对于触发事件的元素的位置,除了 firefox 都支持。以元素盒子模型的 content 区域的左上角为参考点,如果有boder,可能出现负值。
# layerY
如果触发元素没有设置绝对定位或相对定位,以页面左上角作为参考点
如果设置了绝对定位或相对定位,将改变参考坐标系,从触发元素盒子模型的 border 区域的左上角为参考点。