关于offsetX、layerX、clientX、screenX以及pageX

我们都熟知,标题中的几个方法都是用来获取事件(event)的位置,但是他们有什么区别呢?就用一张图来说明:
图片描述

  • offsetX: 指事件发生位置相对触发元素左上角的水平坐标
  • layerX: FF特有,鼠标相比较于当前坐标系的位置,即从当前容器依次往上寻找设置绝对定位或相对定位的元素为参考坐标系,以该容器的左上角来计算水平坐标
  • clientX: 是指事件发生位置相对可视区域的水平坐标(只是document展现的部分,不包括搜索栏、书签栏等)
  • screenX: 是指事件发生位置相对电脑屏幕的水平坐标
  • pageX: 是指事件发生位置相对文档(document)的水平坐标(是指整个文档,当出现滚动条时,隐藏的部分也会被算入pageX)

已注销
10 声望2 粉丝