鼠標事件以及clientX、offsetX、screenX、pageX、x的區別

鼠標事件
鼠標事件有下面這幾種：

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
點擊位置距離當前body可視區域的x，y座標

2、pageX、pageY
對於整個頁面來講，包括了被捲去的body部分的長度

3、screenX、screenY
點擊位置距離當前電腦屏幕的x，y座標

4、offsetX、offsetY
相對於帶有定位的父盒子的x，y座標

5、x、y
和screenX、screenY同樣

如圖所示：