鼠标事件之clientX(Y)、offsetX(Y)、screenX(Y)、pageX(Y)、x(y)的区别与使用详解

一、鼠标事件

鼠标事件有下面这几种：

1. onclick

鼠标点击事件

box.onclick = function(e){
    console.log(e)
}

2. onmousedown

鼠标按下事件

box.onmousedown = function(e){
    console.log(e)
}

3. onmouseup

鼠标松开事件

box.onmouseup = function(e){
    console.log(e)
}

4. onmousemove

鼠标移动事件

box.onmousemove = function(e){
    console.log(e)
}

5. onmouseover

鼠标经过事件

box.onmouseover = function(e){
    console.log(e)
}

6. onmouseout

鼠标划出事件

box.onmouseout = function(e){
    console.log(e)
}

根据以上打印的e的信息，大致为：

由鼠标事件（MouseEvent）可以发现：
其中包含了许多坐标，且每个坐标的含义都不同。下面我们来介绍一下常用的坐标，及其含义。

二、坐标

1、clientX、clientY

当鼠标事件发生时，鼠标相对于浏览器X轴（左侧）Y轴（顶部）的位置

2、pageX、pageY

当鼠标事件发生时，鼠标相对于浏览器X轴（左侧）Y轴（顶部）的位置，包含页面横向滚动距离（被卷去的body部分的长度）

3、screenX、screenY

当鼠标事件发生时，鼠标点击位置距离当前电脑屏幕X轴（左侧）Y轴（顶部）的位置

4、offsetX、offsetY

当鼠标事件发生时，鼠标相对于事件源X轴（左侧）Y轴（顶部）的位置

5、x、y

同screenX、screenY

如图所示：