之前為了還原踩地雷遊戲的行為，花了不少時間研究了各個滑鼠事件適用的場合，發現其實有不少細節以前沒有注意到，於是趁著記憶還新鮮的時候把重點整理了一下，也附上一些簡單的例子在文末，幫助理解。
滑鼠點擊相關事件
常用事件介紹
- Element: click event
左鍵點擊時觸發，有點像是一組 mousedown 和 mouseup 發生在同一個元素上，意味著按下左鍵後若移開元素範圍才放開就不會觸發 click event，但是移開後再移回來放開一樣會觸發。 - Element: mousedown event
任一滑鼠按鍵按下時觸發，相當於手機上的 touchstart。 - Element: mouseup event
任一滑鼠按鍵放開時觸發，相當於手機上的 touchend。 - Element: contextmenu event
右鍵點擊觸發，常用在偵測右鍵點擊，可以用 event.preventDefault() 防止目錄出現。 - Element: dbclick event
短時間內雙擊左鍵觸發。
重點說明
- click event 在電腦和手機上都能觸發
- 點擊事件的觸發順序為 mousedown > mouseup > click
滑鼠移動相關事件
常用事件介紹
- Element: mousemove event
滑鼠移動時觸發，通常在需要用到時才綁定，避免不斷觸發。 - Element: mouseenter event
滑鼠進入元素邊界時觸發，事件不會 bubble。 - Element: mouseleave event
滑鼠完全離開元素時觸發，事件不會 bubble。 - Element: mouseover event
滑鼠經過不同元素時觸發，事件會 bubble。 - Element: mouseout event
滑鼠離開元素時觸發，事件會 bubble。
重點說明
- mouseenter 和 mouseleave 的觸發行為跟 CSS 的 hover 非常相似，mouseenter 在滑鼠完全離開元素 (mouseleave) 前不會再次觸發。
- 綁定 mouseover 或 mouseout event handler 後只要滑鼠經過任一子元素都會吃到 bubble 上來的事件。
判斷滑鼠點擊狀態
透過 MouseEvent 的 button 和 buttons 屬性可以得知滑鼠觸發事件的按鍵以及觸發時的按鍵狀態。
MouseEvent.button
觸發滑鼠事件的按鍵，常用在 mousedown、mouseup 事件，其他如 mouseenter、mousemove 等等皆有此屬性但不適合拿來使用。
- 0: 左鍵
- 1: 滾輪
- 2: 右鍵
MouseEvent.buttons
觸發滑鼠事件時的按鍵按住的狀態。用二進位來表示哪些按鍵正被按住，也就是按鍵值的總和。
- 1: 左鍵
- 2: 右鍵
- 4: 滾輪
來一點例子 🌰
以 Javascript 實作 hover 效果
mouseenter 與 mouseover 比較
判斷滑鼠按鍵點擊狀態
簡易元素拖曳實作
後記
這些觀念雖然不難，卻非常重要，常常在一些面試題目中看到，但總是沒有完全理解或是過一陣子就忘了，趁這次機會整理、紀錄起來，以後就再也不怕啦~
感謝您讀到這兒，如果你喜歡這篇文章，請幫我拍個小手：）
若內容有任何問題非常歡迎一起討論或是協助修正。
