鼠標事件

在 JavaScript 中了解與鼠標事件的基本互動方式

在處理鼠標事件時，我們有以下能力：

• mousedown 鼠標按下
• mouseup 鼠標釋放
• click 點擊事件
• dblclick 雙擊事件
• mousemove 鼠標移動到元素上方時
• mouseover 鼠標移動到元素或其子元素上方時
• mouseenter 鼠標移動到元素上時。類似 mouseover 但不會冒泡（稍後會詳細解釋！）
• mouseout 鼠標移出元素或進入子元素時
• mouseleave 鼠標移出元素時。類似 mouseout 但不會冒泡（稍後會詳細解釋！）
• contextmenu 右鍵點擊時打開上下文菜單

事件有重疊。在追踪 click 事件時，就如同追踪 mousedown 後跟著 mouseup 事件。在 dblclick 的情況下，click 也會被觸發兩次。

mousedown、mousemove 和 mouseup 可以組合使用以追踪拖放事件。

對於 mousemove，要小心，因為它在鼠標移動期間會觸發多次。我們需要進行節流處理，這是我們稍後在分析滾動時會談到的。

在事件處理程序中，我們可以訪問許多屬性。

例如，在鼠標事件中，可以通過檢查事件對象的 button 屬性來查看按下了哪個鼠標按鈕：

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
    // 鼠標按下
    console.log(event.button) // 0=左鍵，2=右鍵
})

以下是我們可以使用的所有屬性：

• altKey 如果事件觸發時按下了 Alt 鍵則為 true
• button 如果有，是觸發鼠標事件時按下的鍵的編號（通常 0 = 主按鈕，1 = 中間按鈕，2 = 右鍵）。適用於由點擊按鈕引起的事件（例如點擊事件）
• buttons 如果有，表示在任何鼠標事件上按下的按鈕的編號
• clientX / clientY 鼠標指針相對於瀏覽器窗口的 x 和 y 坐標，不受滾動影響
• ctrlKey 如果事件觸發時按下了 Ctrl 鍵則為 true
• metaKey 如果事件觸發時按下了 Meta 鍵則為 true
• movementX / movementY 鼠標指針相對於上次 mousemove 事件的位置的 x 和 y 坐標。用於跟踪移動時的鼠標速度
• region 在 Canvas API 中使用
• relatedTarget 事件的次要目標，例如在移動時
• screenX / screenY 鼠標指針在屏幕坐標中的 x 和 y 坐標
• shiftKey 如果事件觸發時按下了 Shift 鍵則為 true