前端鼠标事件有如下几类：
<ul>
<li>onclick</li>
<li>onmousedown</li>
<li>onmouseup</li>
<li>onmousemove</li>
<li>onmouseover</li>
<li>onmouseout</li>
</ul>
<pre><code>box.onclick = function(e){
 console.log(e)
}
box.onmousedown = function(e){
 console.log(e)
}
box.onmouseup = function(e){
 console.log(e)
}
box.onmouseover = function(e){
 console.log(e)
}
box.onmouseout = function(e){
 console.log(e)
}
</code></pre>
<img src="https://img.ithere.net/article/article/image/2021/1/26/UvbXTDZagAXKvZkHxugSLXsmOPrGaZRt.png" alt="WechatIMG25486.png">
由鼠标事件（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 
<img src="https://img.ithere.net/article/article/image/2021/1/26/TbJAWRsLooUTxQHJLrwmMguhCMrWOInj.png" alt="WechatIMG25487.png">

鼠标事件之Event

前端鼠标事件有如下几类：

onclick
onmousedown
onmouseup
onmousemove
onmouseover
onmouseout

box.onclick = function(e){
    console.log(e)
}
box.onmousedown = function(e){
    console.log(e)
}
box.onmouseup = function(e){
    console.log(e)
}
box.onmouseover = function(e){
    console.log(e)
}
box.onmouseout = function(e){
    console.log(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