/

鼠標事件

鼠標事件

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

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

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

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

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

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

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

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

1
2
3
4
5
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

tags: [“JavaScript”, “鼠標事件”, “事件處理程序”, “拖放事件”]