乐趣区

关于offsetX、layerX、clientX、screenX以及pageX(Y同理)

关于 offsetX、layerX、clientX、screenX 以及 pageX
我们都熟知,标题中的几个方法都是用来获取事件 (event) 的位置,但是他们有什么区别呢?就用一张图来说明:

offsetX:指事件发生位置相对触发元素左上角的水平坐标

layerX:FF 特有, 鼠标相比较于当前坐标系的位置, 即从当前容器依次往上寻找设置绝对定位或相对定位的元素为参考坐标系,以该容器的左上角来计算水平坐标

clientX:是指事件发生位置相对可视区域的水平坐标(只是 document 展现的部分,不包括搜索栏、书签栏等)

screenX:是指事件发生位置相对电脑屏幕的水平坐标

pageX:是指事件发生位置相对文档(document)的水平坐标(是指整个文档,当出现滚动条时,隐藏的部分也会被算入 pageX)

退出移动版