鼠標事件

在 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