鼠標是我們日常生活中經常使用的，這裏我們來簡單瞭解下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;
}
效果：
參考: