秒懂鼠标事件clientX、offsetX、screenX、pageX、x的区别!

  1. onclick
    鼠标点击事件

  2. onmousedown
    鼠标按下事件

  3. onmouseup
    鼠标松开事件

  4. onmousemove
    鼠标移动事件

  5. onmouseover
    鼠标经过事件

  6. onmouseout
    鼠标划出事件

由鼠标事件(MouseEvent)可以发现:
其中包含了许多的坐标,且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标,以及它们的含义。

划重点!!

一、clientX、clientY
点击位置距离当前body可视区域的x,y坐标

二、pageX、pageY
对于整个页面来说,包括了被卷去的body部分的长度

三、screenX、screenY
点击位置距离当前电脑屏幕的x,y坐标

四、offsetX、offsetY
相对于带有定位的父盒子的x,y坐标

五、x、y
和screenX、screenY一样
————————————————

敲黑板!!!
如图所示:

秒懂鼠标事件clientX、offsetX、screenX、pageX、x的区别!