点击或触摸事件中的相关X,Y介绍

javascript
  目录
  1. 1. 点击或触摸事件中的相关X,Y介绍
    1. 1.1. 位置属性
    2. 1.2. 属性介绍
      1. 1.2.1. clientX、clientY
      2. 1.2.2. pageX、pageY
      3. 1.2.3. screenX、screenY
      4. 1.2.4. offsetX、offsetY
      5. 1.2.5. x、y
    3. 1.3. 总结

点击或触摸事件中，事件对象的clientX,pageX,screenX,offsetX,x介绍

点击或触摸事件中的相关X,Y介绍

位置属性

我们在使用点击事件时，想获取当前鼠标在页面中的位置，可以把事件对象打印出来，看到了下图中的一些相关于x，y的属性。
img

属性介绍

clientX、clientY

点击位置距离当前body可视区域的x，y坐标

pageX、pageY

对于整个页面来说，包括了被卷去的body部分的长度

screenX、screenY

点击位置距离当前电脑屏幕的x，y坐标

offsetX、offsetY

相对于带有定位的父盒子的x，y坐标

x、y

和screenX、screenY一样

总结

img

  基础知识