鼠标是我们日常生活中经常使用的，这里我们来简单了解下JS中的鼠标事件以及使用的一些小技巧。
1. 鼠标事件类型
我们将鼠标事件分为两类：简单事件和复杂事件
1.1 简单事件
mousedown/mouseup： 鼠标按钮在一个元素上点击/释放时触发。mouseover/mouseout： 鼠标指针进入/离开一个元素时触发（鼠标快速移动的话可能会跳过中间元素）。mouseenter/mouseleave： 鼠标指针进入/离开一个元素时触发（和mouseover/mouseout的不同点在于：①元素内部进入或离开子代时的转换不会触发。②mouseenter/mouseleave事件不冒泡）。mousemove：鼠标在一个元素上移动时触发。
1.2 复杂事件
click（鼠标点击事件，“点击”指的是用鼠标左键）：鼠标左键在同一个元素上按下并释放开后触发。contextmenu（右键菜单事件）：鼠标右键单击后时触发。dbclick（双击事件）：在一个元素上快速点击2次（1秒内）时触发。
2. 鼠标事件的触发顺序
简单事件的触发顺序没什么好说的，我们来看看复杂事件的触发顺序：
- 从①中可以看到鼠标点击时的触发事件过程：
mousedown -> mouseup -> click， which属性值为1（这个后面讨论）。 - 从②中可以看到右键菜单事件的触发过程：
mousedown -> mouseup -> contextmenu，which属性值为3。 - 从③中可以看到双击事件的触发过程：
mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dbclick， which属性值为1。 - ④是使用鼠标滚轮点击时（是的，鼠标滚轮也是也可以点击的！）的触发过程：
mousedown -> mouseup，which属性值为2。
这上面，which我们猜猜也能知道代表着啥，即值1、2、3分别代表鼠标左键、中键（滚轮）、右键。
3. 小Tips
3.1 平时使用小技巧
- 平时我们想在新的标签页中打开一个链接，可能使用的方式是：鼠标右键唤起菜单栏 -> 选择“在新的标签页中打开链接”。实际上有更简便的方式：鼠标中键（滚轮）点击链接就可以在新的标签页中打开该链接了（我经常用“在新的标签页中打开”这个功能，然鹅之前居然不知道还可以用鼠标滚轮点击就可以的，孤陋寡闻了。。。）
- 当页面有垂直滚动条时，在页面空白处按下鼠标中键，然后移动鼠标，向上移动时可以让页面自动向上滚动，反之可以上页面自动向下滚动。向上/下移动的距离越大，自动滚动的速度越快。
- 从第2节中我们知道，触发一个点击事件，一共是需要经历：在同一个元素上，鼠标按下—>鼠标松开这一完整过程才能正常触发点击事件。也就是只要这过程不完整的话就不会触发点击事件，利用这点，我们平时在按下提交表单按钮的时候，突然又后悔了（比如要剁手一件宝贝），这时我们保持鼠标按键按下的状态，然后将鼠标移开“提交”这个按钮，再松开鼠标，这样我们就破坏了点击的流程（没在同一个元素上触发：mousedown（元素内）、mouseup（元素外）事件），点击事件也就不会触发了。
3.2 开发时的小技巧
- 所有鼠标事件都包含关于按下修饰符键（比如
Ctrl键 + 鼠标左键同时点击等）的信息，如下为一些修饰符键：
| 事件属性(event对象上) | 对应的修饰符键 |
|---|---|
| shiftKey | Shift 键 |
| altKey | Alt键 (或者 Mac 上的 Opt 键) |
| ctrlKey | Ctrl 键 |
| metaKey | Mac 的 Cmd 键 |
在Mac上通常是用Cmd替换Ctrl，对于不同的操作系统，我们可以在JS代码中通过if (event.ctrlKey || event.metaKey)判断来让所有用户都有一致性的体验。
2. 很多用户都有在新的标签页中打开链接的习惯，我们可以将<a>标签的样式设置成<button>的样子，这样用户就可以在对应的地方使用在新的标签页中打开链接的功能，原生的<button>标签是没有该功能的。
例子：
<ul id="menu" class="menu">
<li><a href="/html">HTML</a></li>
<li><a href="/javascript">JavaScript</a></li>
<li><a href="/css">CSS</a></li>
</ul>
对应的样式：
.menu li {
display: inline-block;
margin: 0;
}
.menu > li a {
display: inline-block;
margin: 0 2px;
outline: none;
text-align: center;
text-decoration: none;
font: 14px/100% sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
border-radius: .5em;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
}
.menu > li:hover a {
text-decoration: none;
background: #007ead;
}
效果：
参考: