一、前言

在前端開發中，鼠標事件 是實現用戶交互的重要手段之一。通過監聽用戶的點擊、移動、懸停等操作，我們可以構建出豐富而靈活的網頁交互體驗。

本文將帶你深入了解：

• JavaScript 中常見的鼠標事件；
• 各類鼠標事件的觸發時機；
• 如何獲取鼠標位置信息；
• 實際開發中的典型使用場景；
• 推薦的最佳實踐；

通過這篇文章，你將掌握如何利用鼠標事件來提升網頁的交互性與用戶體驗。

二、常見的鼠標事件類型

事件類型	觸發條件	是否冒泡
click	鼠標左鍵單擊（按下 + 松開）	? 是
mousedown	鼠標按鍵按下時觸發	? 是
mouseup	鼠標按鍵松開時觸發	? 是
mousemove	鼠標在元素上移動時持續觸發	? 是
mouseover	鼠標移入元素或其子元素時觸發	? 是
mouseout	鼠標移出元素或其子元素時觸發	? 是
mouseenter	鼠標進入元素邊界時觸發（不冒泡）	? 否
mouseleave	鼠標離開元素邊界時觸發（不冒泡）	? 否

📌 小貼士：

• mouseenter?和?mouseleave?不會因子元素觸發而頻繁觸發，適合用于 hover 效果；
• mouseover?和?mouseout?會在子元素切換時多次觸發，適用于更復雜的交互邏輯。

三、常用鼠標事件詳解

1.?click

當用戶點擊元素（通常為鼠標左鍵）時觸發。

document.getElementById('btn').addEventListener('click', function () {alert('按鈕被點擊了')
})

📌 應用場景：

• 按鈕點擊提交；
• 切換狀態；
• 彈窗顯示/隱藏；

2.?mousedown?與?mouseup

這兩個事件分別在鼠標按鍵按下和釋放時觸發，常用于拖拽、繪圖等功能。

const box = document.getElementById('box')box.addEventListener('mousedown', () => {console.log('鼠標按下')
})box.addEventListener('mouseup', () => {console.log('鼠標釋放')
})

📌 應用場景：

• 自定義拖拽組件；
• 拖動排序；
• 按住按鈕執行某個動作（如音量調節）；

3.?mousemove

當鼠標在元素內移動時持續觸發，頻率較高，注意性能優化。

document.getElementById('canvas').addEventListener('mousemove', function(event) {console.log(`鼠標坐標: ${event.clientX}, ${event.clientY}`)
})

📌 應用場景：

• 繪圖工具；
• 鼠標跟隨特效；
• 實時反饋鼠標位置；

4.?mouseover?與?mouseout

當鼠標進入或離開元素及其子元素時觸發，適用于菜單展開收起、提示框展示等場景。

const menu = document.getElementById('menu')menu.addEventListener('mouseover', () => {console.log('鼠標進入菜單區域')
})menu.addEventListener('mouseout', () => {console.log('鼠標離開菜單區域')
})

📌 注意：

• 子元素切換會導致反復觸發；
• 若希望只在父元素進出時觸發，推薦使用?mouseenter?/?mouseleave。

5.?mouseenter?與?mouseleave

僅在鼠標進入或離開目標元素本身時觸發，不會因為子元素的變化而重復觸發。

const tooltip = document.getElementById('tooltip')tooltip.addEventListener('mouseenter', () => {console.log('鼠標進入提示框')
})tooltip.addEventListener('mouseleave', () => {console.log('鼠標離開提示框')
})

📌 推薦使用場景：

• 工具提示（tooltip）展示與隱藏；
• Hover 動畫控制；
• 圖片放大鏡效果；

四、獲取鼠標位置信息

鼠標事件對象提供了多個屬性用于獲取鼠標的當前位置和偏移量：

屬性	描述
clientX,?clientY	相對于瀏覽器視口的位置（不包括滾動條）
pageX,?pageY	相對于整個頁面的位置（包括滾動條）
offsetX,?offsetY	相對于事件目標元素的位置
screenX,?screenY	相對于屏幕的位置

document.addEventListener('mousemove', function (e) {console.log('client:', e.clientX, e.clientY)console.log('page:', e.pageX, e.pageY)console.log('screen:', e.screenX, e.screenY)
})

📌 使用建議：

• 頁面定位 → 使用?pageX/Y
• 視口定位 → 使用?clientX/Y
• 元素內部定位 → 使用?offsetX/Y

五、阻止默認行為與事件傳播

有時我們希望阻止某些默認行為或停止事件繼續傳播：

? 阻止默認行為

document.querySelector('a').addEventListener('click', function (e) {e.preventDefault()console.log('鏈接被點擊，但沒有跳轉')
})

? 阻止事件冒泡

document.getElementById('child').addEventListener('click', function (e) {e.stopPropagation()console.log('子元素被點擊，父級不會收到事件')
})

六、實際開發中的常見應用場景

場景	描述
表格行點擊高亮	點擊某一行時應用背景色
拖拽功能	結合?mousedown、mousemove、mouseup?實現拖放
菜單下拉展開	使用?mouseenter?/?mouseleave?控制顯示隱藏
圖片預覽縮略圖	鼠標懸停時顯示大圖
鼠標軌跡繪制	在 canvas 上記錄并繪制鼠標路徑
鼠標右鍵菜單	使用?contextmenu?事件自定義菜單
鼠標長按操作	利用?mousedown?+?setTimeout?實現長按邏輯

七、最佳實踐與注意事項

項目	建議
多個事件綁定	使用統一處理函數，避免重復代碼
性能優化	對高頻事件（如?mousemove）進行節流或防抖處理
事件解綁	組件卸載時及時移除監聽器，防止內存泄漏
避免阻塞主線程	避免在鼠標事件中執行耗時任務
移動端兼容	注意觸摸屏下的模擬鼠標事件行為差異
瀏覽器兼容性	使用標準 API 并考慮 polyfill 支持舊版瀏覽器

八、總結對比表

事件類型	是否冒泡	適用場景
click	?	點擊交互
mousedown	?	開始拖拽、長按檢測
mouseup	?	結束拖拽、確認操作
mousemove	?	實時反饋、繪圖
mouseover	?	懸停響應（含子元素）
mouseout	?	離開響應（含子元素）
mouseenter	?	懸停響應（不含子元素）
mouseleave	?	離開響應（不含子元素）

九、結語

感謝您的閱讀！如果你有任何疑問或想要分享的經驗，請在評論區留言交流！