「这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战」
鼠标的事件也是我们平时经常会用到的，所以本节主要对常用的一些鼠标的事件做个记录。
事件类型
现在我们先来看看鼠标的一些事件类型：
| 事件 | 描述 |
|---|---|
mousedown/mouseup | 在元素上点击/释放鼠标按钮。 |
mouseover/mouseout | 鼠标指针从一个元素上移入/移出。 |
mousemove | 鼠标在元素上的每个移动都会触发此事件。 |
click | 如果使用的是鼠标左键，则在同一个元素上的 mousedown 及 mouseup 相继触发后，触发该事件。 |
dblclick | 在短时间内双击同一元素后触发。如今已经很少使用了。 |
contextmenu | 在鼠标右键被按下时触发。还有其他打开上下文菜单的方式，例如使用特殊的键盘按键，在这种情况下它也会被触发，因此它并不完全是鼠标事件。 |
事件顺序
通常一个操作会触发多个鼠标事件，例如，点击鼠标左键，在鼠标左键被按下时，会首先触发 mousedown，然后当鼠标左键被释放时，会触发 mouseup 和 click。
这个事件的处理顺序是固定的mousedown → mouseup → click
坐标
所有的鼠标事件都提供了两种形式的坐标：
- 相对于窗口的坐标：
clientX和clientY。
相对于文档的坐标
pageX/Y：以文档的左上角为参照物，并且同一位置的坐标不随页面的滚动而改变。
- 相对于文档的坐标：
pageX和pageY。
相对于窗口的坐标
clientX/Y：以当前窗口的左上角为参照物，并且同一位置的坐标会随着页面的滚动而改变。
扩展
鼠标双击的副作用处理
假如有这样一段代码：
<span ondblclick="alert('dblclick')">双击</span>
我们期望的是双击执行我们的事件，但是会发现双击执行事件的同时，它还选中了文本。
如果你不希望造成不必要的选择，那么可以这样利用我们之前介绍过的【阻止浏览器行为】的方式来解决这个问题，即防止浏览器对 mousedown 进行操作：
<span ondblclick="alert('dblclick')" onmousedown="return false">双击</span>
防止复制
如果你想禁用选择以保护页面的内容不被复制粘贴，可以使用oncopy这个事件：
<div oncopy="alert('禁止复制!');return false">
这是一个禁止复制的示例
</div>
🎨【点赞】【关注】不迷路，更多前端干货等你解锁
往期推荐
