前言

JavaScript鼠標(biāo)事件是指當(dāng)用戶使用鼠標(biāo)與網(wǎng)頁(yè)進(jìn)行交互時(shí)，瀏覽器自動(dòng)觸發(fā)的一系列信號(hào)。這些信號(hào)會(huì)以事件對(duì)象的形式傳遞給JavaScript代碼，讓開發(fā)者能夠捕捉并響應(yīng)用戶的操作，從而實(shí)現(xiàn)各種交互效果。

簡(jiǎn)單來說，鼠標(biāo)事件就是用戶鼠標(biāo)動(dòng)作與網(wǎng)頁(yè)之間的溝通語(yǔ)言。當(dāng)用戶點(diǎn)擊、移動(dòng)、滾動(dòng)或懸停時(shí)，瀏覽器會(huì)發(fā)出相應(yīng)的通知，而開發(fā)者編寫的代碼則可以監(jiān)聽這些通知并做出反應(yīng)。

常見的鼠標(biāo)事件包括：

• 點(diǎn)擊類：click（點(diǎn)擊）、dblclick（雙擊）、mousedown（按下）、mouseup（釋放）

• 移動(dòng)類：mousemove（移動(dòng)）、mouseover（移入）、mouseout（移出）、mouseenter（進(jìn)入）、mouseleave（離開）

• 特殊類：wheel（滾輪滾動(dòng)）、contextmenu（右鍵菜單）

每個(gè)鼠標(biāo)事件都會(huì)攜帶豐富的事件對(duì)象，包含鼠標(biāo)位置、按下的按鍵、是否同時(shí)按下了功能鍵（如Ctrl、Shift）等信息。這使得開發(fā)者可以精確地控制交互行為，例如判斷用戶點(diǎn)擊的是左鍵還是右鍵、鼠標(biāo)在頁(yè)面中的具體坐標(biāo)、是否按住Shift鍵進(jìn)行多選等。

鼠標(biāo)事件是Web交互的基石，從最簡(jiǎn)單的按鈕點(diǎn)擊到復(fù)雜的拖拽繪圖、游戲控制，都離不開對(duì)鼠標(biāo)事件的監(jiān)聽和處理。

一、JavaScript鼠標(biāo)事件逐一分析

（一）核心鼠標(biāo)事件（基礎(chǔ)交互）

1.click

• 含義：當(dāng)用戶在元素上按下并釋放鼠標(biāo)主鍵（通常是左鍵）時(shí)觸發(fā)。它也可以通過在元素獲得焦點(diǎn)時(shí)按回車鍵觸發(fā)。

• 詞源："click"意為"點(diǎn)擊"，模擬鼠標(biāo)點(diǎn)擊的聲音。

• 語(yǔ)法：

  element.addEventListener('click', function(event) { ... });
  // 或
  element.onclick = function(event) { ... };

• 參數(shù)及說明：事件回調(diào)函數(shù)接收一個(gè) MouseEvent 對(duì)象作為參數(shù)，包含鼠標(biāo)位置、按鍵狀態(tài)等信息。注意：click 事件依賴于 mousedown 和 mouseup 事件的先后觸發(fā)，如果其中任何一個(gè)被取消，click 事件就不會(huì)觸發(fā)。

• 簡(jiǎn)單示例：

  document.getElementById('myButton').addEventListener('click', function(e) {
      alert('按鈕被點(diǎn)擊了！位置：' + e.clientX + ', ' + e.clientY);
  });

• 示例分析：這段代碼為ID為"myButton"的按鈕添加了點(diǎn)擊事件監(jiān)聽。當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)彈出一個(gè)警告框，顯示"按鈕被點(diǎn)擊了！位置：X, Y"，其中X和Y是鼠標(biāo)點(diǎn)擊時(shí)相對(duì)于瀏覽器視口的坐標(biāo)。通過e.clientX和e.clientY可以獲取鼠標(biāo)的精確位置，這在需要記錄用戶點(diǎn)擊位置或?qū)崿F(xiàn)基于位置的交互時(shí)非常有用。

2.dblclick

• 含義：當(dāng)用戶在元素上雙擊鼠標(biāo)主鍵時(shí)觸發(fā)。

• 詞源："dbl"是"double"（雙倍）的縮寫，"click"意為點(diǎn)擊。

• 語(yǔ)法：

  element.addEventListener('dblclick', function(event) { ... });
  // 或
  element.ondblclick = function(event) { ... };

• 參數(shù)及說明：接收 MouseEvent 對(duì)象。dblclick 依賴于兩次連續(xù)的 click 事件，如果其中任意一次 click 被取消，dblclick 也不會(huì)觸發(fā)。事件對(duì)象的 detail 屬性可以記錄同一像素位置的點(diǎn)擊次數(shù)。

• 簡(jiǎn)單示例：

  element.addEventListener('dblclick', function(e) {
      alert('元素被雙擊了！');
  });

• 示例分析：這個(gè)示例為某個(gè)元素添加了雙擊事件監(jiān)聽。當(dāng)用戶快速雙擊該元素時(shí)，會(huì)彈出"元素被雙擊了！"的提示框。需要注意的是，雙擊事件默認(rèn)的時(shí)間間隔取決于操作系統(tǒng)的鼠標(biāo)設(shè)置，一般在500毫秒內(nèi)連續(xù)點(diǎn)擊兩次才會(huì)被識(shí)別為雙擊。在實(shí)際應(yīng)用中，雙擊事件常用于實(shí)現(xiàn)圖片放大查看、文本選中后的額外操作等場(chǎng)景。

3.mousedown

• 含義：當(dāng)用戶在元素上按下任意鼠標(biāo)按鈕時(shí)立即觸發(fā)，無(wú)需釋放按鈕。

• 詞源："mouse"（鼠標(biāo)）+ "down"（按下）。

• 語(yǔ)法：

  element.addEventListener('mousedown', function(event) { ... });
  // 或
  element.onmousedown = function(event) { ... };

• 參數(shù)及說明：接收 MouseEvent 對(duì)象?？梢酝ㄟ^ event.button 屬性判斷按下了哪個(gè)鍵（0:主鍵/左鍵，1:滾輪/中鍵，2:副鍵/右鍵）。注意：此事件不能通過鍵盤觸發(fā)。

• 簡(jiǎn)單示例：

  element.addEventListener('mousedown', function(e) {
      if (e.button === 0) console.log('左鍵按下');
      else if (e.button === 2) console.log('右鍵按下');
  });

• 示例分析：這段代碼通過判斷e.button的值來區(qū)分用戶按下了哪個(gè)鼠標(biāo)鍵。e.button === 0表示左鍵，e.button === 2表示右鍵（中鍵是1）。這個(gè)特性非常實(shí)用，例如在畫板應(yīng)用中，可以區(qū)分左鍵繪圖和右鍵擦除；在游戲中可以區(qū)分不同的攻擊方式。注意e.button的值是在按下瞬間確定的，不會(huì)因?yàn)楹罄m(xù)其他鍵的按下而改變。

4.mouseup

• 含義：當(dāng)用戶釋放按下的鼠標(biāo)按鈕時(shí)觸發(fā)。

• 詞源："mouse" + "up"（抬起）。

• 語(yǔ)法：

  element.addEventListener('mouseup', function(event) { ... });
  // 或
  element.onmouseup = function(event) { ... };

• 參數(shù)及說明：接收 MouseEvent 對(duì)象。與 mousedown 配對(duì)使用，常用來檢測(cè)完整的點(diǎn)擊操作。同樣不能通過鍵盤觸發(fā)。

• 簡(jiǎn)單示例：

  element.addEventListener('mouseup', function(e) {
      console.log('鼠標(biāo)按鈕已釋放');
  });

• 示例分析：這個(gè)示例在鼠標(biāo)按鈕釋放時(shí)在控制臺(tái)輸出提示信息。mouseup事件通常與mousedown配合使用來實(shí)現(xiàn)拖拽功能：在mousedown時(shí)開始拖拽，在mouseup時(shí)結(jié)束拖拽。它也能幫助檢測(cè)用戶是否在元素外釋放鼠標(biāo)，這在實(shí)現(xiàn)下拉菜單、模態(tài)框等組件時(shí)非常有用。

5.mousemove

• 含義：當(dāng)鼠標(biāo)在元素內(nèi)部移動(dòng)時(shí)持續(xù)觸發(fā)。

• 詞源："mouse" + "move"（移動(dòng)）。

• 語(yǔ)法：

  element.addEventListener('mousemove', function(event) { ... });
  // 或
  element.onmousemove = function(event) { ... };

• 參數(shù)及說明：接收 MouseEvent 對(duì)象，包含鼠標(biāo)的實(shí)時(shí)坐標(biāo)信息。由于該事件會(huì)高頻觸發(fā)，在監(jiān)聽函數(shù)中應(yīng)避免執(zhí)行耗時(shí)操作，以免影響性能。

• 簡(jiǎn)單示例：

  document.addEventListener('mousemove', function(e) {
      console.log(`鼠標(biāo)當(dāng)前位置：${e.clientX}, ${e.clientY}`);
  });

• 示例分析：這段代碼在整個(gè)文檔上監(jiān)聽鼠標(biāo)移動(dòng)，每當(dāng)鼠標(biāo)移動(dòng)時(shí)就在控制臺(tái)輸出當(dāng)前坐標(biāo)。由于mousemove事件觸發(fā)頻率非常高（每秒可達(dá)數(shù)十次甚至更多），在實(shí)際開發(fā)中經(jīng)常需要配合節(jié)流或防抖技術(shù)來優(yōu)化性能。例如，可以用requestAnimationFrame來限制更新頻率，確保動(dòng)畫流暢的同時(shí)避免不必要的計(jì)算。

6.mouseover

• 含義：當(dāng)鼠標(biāo)指針從元素外部移動(dòng)到元素邊界內(nèi)時(shí)觸發(fā)。如果移動(dòng)到元素的子元素上，也會(huì)再次觸發(fā)。

• 詞源："mouse" + "over"（在...上方）。

• 語(yǔ)法：

  element.addEventListener('mouseover', function(event) { ... });
  // 或
  element.onmouseover = function(event) { ... };

• 參數(shù)及說明：接收 MouseEvent 對(duì)象?？梢酝ㄟ^ event.relatedTarget 獲取鼠標(biāo)來自哪個(gè)元素（即移出的元素）。此事件會(huì)冒泡，且進(jìn)入子元素時(shí)會(huì)重復(fù)觸發(fā)。

• 簡(jiǎn)單示例：

  element.addEventListener('mouseover', function(e) {
      console.log('鼠標(biāo)進(jìn)入了元素');
      console.log('來自：', e.relatedTarget);
  });

• 示例分析：這個(gè)示例在鼠標(biāo)進(jìn)入元素時(shí)輸出提示信息，并通過e.relatedTarget顯示鼠標(biāo)是從哪個(gè)元素移動(dòng)過來的。relatedTarget屬性在實(shí)現(xiàn)復(fù)雜的懸停效果時(shí)非常有用，比如判斷鼠標(biāo)是從父元素還是兄弟元素進(jìn)入的。需要注意的是，由于事件冒泡和子元素觸發(fā)機(jī)制，當(dāng)鼠標(biāo)移動(dòng)到嵌套的子元素上時(shí)，父元素的mouseover會(huì)再次觸發(fā)。

7.mouseout

• 含義：當(dāng)鼠標(biāo)指針離開元素邊界時(shí)觸發(fā)。如果鼠標(biāo)從元素移動(dòng)到其子元素上，也會(huì)觸發(fā)。

• 詞源："mouse" + "out"（離開）。

• 語(yǔ)法：

  element.addEventListener('mouseout', function(event) { ... });
  // 或
  element.onmouseout = function(event) { ... };

• 參數(shù)及說明：接收 MouseEvent 對(duì)象?？梢酝ㄟ^ event.relatedTarget 獲取鼠標(biāo)將要去往的元素。此事件會(huì)冒泡，且移動(dòng)到子元素時(shí)也會(huì)觸發(fā)。

• 簡(jiǎn)單示例：

  element.addEventListener('mouseout', function(e) {
      console.log('鼠標(biāo)離開了元素');
      console.log('前往：', e.relatedTarget);
  });

• 示例分析：這段代碼在鼠標(biāo)離開元素時(shí)輸出提示信息，并通過e.relatedTarget顯示鼠標(biāo)將要前往的目標(biāo)元素。與mouseover類似，當(dāng)鼠標(biāo)移動(dòng)到子元素上時(shí)，也會(huì)觸發(fā)mouseout事件，這在某些場(chǎng)景下可能會(huì)帶來意外的行為。例如，在實(shí)現(xiàn)下拉菜單時(shí)，如果菜單項(xiàng)包含子菜單，使用mouseout可能導(dǎo)致菜單意外關(guān)閉，這時(shí)通常會(huì)考慮使用mouseleave替代。

8.mouseenter

• 含義：當(dāng)鼠標(biāo)首次進(jìn)入元素邊界時(shí)觸發(fā)。與 mouseover 不同，它不會(huì)冒泡，且移動(dòng)到子元素時(shí)不會(huì)重復(fù)觸發(fā)。

• 詞源："mouse" + "enter"（進(jìn)入）。

• 語(yǔ)法：

  element.addEventListener('mouseenter', function(event) { ... });
  // 或
  element.onmouseenter = function(event) { ... };

• 參數(shù)及說明：接收 MouseEvent 對(duì)象。這是DOM3級(jí)事件中添加的新事件，行為更直觀，通常用于避免因元素嵌套導(dǎo)致的多次觸發(fā)問題。

• 簡(jiǎn)單示例：

  parentElement.addEventListener('mouseenter', function(e) {
      console.log('鼠標(biāo)進(jìn)入了父元素（進(jìn)入子元素不會(huì)重復(fù)觸發(fā)）');
  });

• 示例分析：這個(gè)示例展示了mouseenter的關(guān)鍵特性：當(dāng)鼠標(biāo)從父元素外部進(jìn)入父元素時(shí)觸發(fā)一次，之后即使鼠標(biāo)在父元素內(nèi)部的子元素間移動(dòng)，也不會(huì)再次觸發(fā)。這在實(shí)現(xiàn)懸停效果時(shí)非常理想，比如導(dǎo)航菜單的下拉顯示——我們希望鼠標(biāo)進(jìn)入菜單區(qū)域時(shí)顯示子菜單，而不是每次經(jīng)過菜單項(xiàng)都重復(fù)觸發(fā)。

9.mouseleave

• 含義：當(dāng)鼠標(biāo)完全離開元素邊界時(shí)觸發(fā)。與 mouseout 不同，它不會(huì)冒泡，且離開元素到其子元素時(shí)不會(huì)觸發(fā)。

• 詞源："mouse" + "leave"（離開）。

• 語(yǔ)法：

  element.addEventListener('mouseleave', function(event) { ... });
  // 或
  element.onmouseleave = function(event) { ... };

• 參數(shù)及說明：接收 MouseEvent 對(duì)象。也是DOM3級(jí)事件中添加的事件，與 mouseenter 配對(duì)使用，行為更符合直覺。

• 簡(jiǎn)單示例：

  parentElement.addEventListener('mouseleave', function(e) {
      console.log('鼠標(biāo)完全離開了父元素');
  });

• 示例分析：這個(gè)示例與mouseenter對(duì)應(yīng)，只有當(dāng)鼠標(biāo)完全離開父元素（進(jìn)入父元素外部的區(qū)域）時(shí)才會(huì)觸發(fā)。即使鼠標(biāo)從父元素移動(dòng)到其內(nèi)部的子元素上，也不會(huì)觸發(fā)mouseleave。這與mouseout形成鮮明對(duì)比——mouseout在離開父元素到子元素時(shí)就會(huì)觸發(fā)。因此，mouseenter和mouseleave組合是實(shí)現(xiàn)懸停下拉菜單、工具提示等組件的理想選擇。

（二）滾輪與上下文菜單事件

10.wheel

• 含義：當(dāng)用戶滾動(dòng)鼠標(biāo)滾輪或操作類似滾輪的輸入設(shè)備（如觸摸板雙指滑動(dòng)）時(shí)觸發(fā)。

• 詞源："wheel"意為"滾輪"。

• 語(yǔ)法：

  element.addEventListener('wheel', function(event) { ... });
  // 或
  element.onwheel = function(event) { ... };

• 參數(shù)及說明：接收 WheelEvent 對(duì)象（繼承自 MouseEvent）?？梢酝ㄟ^ event.deltaY 獲取垂直滾動(dòng)量，event.deltaX 獲取水平滾動(dòng)量。

• 簡(jiǎn)單示例：

  document.addEventListener('wheel', function(e) {
      console.log('滾輪滾動(dòng)量：', e.deltaY);
      // 阻止默認(rèn)滾動(dòng)行為
      e.preventDefault();
  });

• 示例分析：這段代碼監(jiān)聽整個(gè)文檔的滾輪事件，在控制臺(tái)輸出垂直滾動(dòng)量e.deltaY，并調(diào)用e.preventDefault()阻止瀏覽器的默認(rèn)滾動(dòng)行為。deltaY為正表示向下滾動(dòng)，為負(fù)表示向上滾動(dòng)，其數(shù)值大小表示滾動(dòng)速度。這個(gè)特性常用于實(shí)現(xiàn)自定義滾動(dòng)效果、圖片縮放（如按住Ctrl鍵滾動(dòng)放大）、地圖縮放等交互。需要注意的是，阻止默認(rèn)滾動(dòng)可能會(huì)影響用戶體驗(yàn)，應(yīng)謹(jǐn)慎使用。

11.contextmenu

• 含義：當(dāng)用戶嘗試打開上下文菜單時(shí)觸發(fā)（通常是點(diǎn)擊鼠標(biāo)右鍵）。此事件是可以取消的，可以用來自定義右鍵菜單。

• 詞源："context"（上下文）+ "menu"（菜單）。

• 語(yǔ)法：

  element.addEventListener('contextmenu', function(event) { ... });
  // 或
  element.oncontextmenu = function(event) { ... };

• 參數(shù)及說明：接收 MouseEvent 對(duì)象。調(diào)用 event.preventDefault() 可以阻止瀏覽器默認(rèn)的右鍵菜單顯示。

• 簡(jiǎn)單示例：

  document.addEventListener('contextmenu', function(e) {
      e.preventDefault(); // 禁用右鍵菜單
      alert('自定義右鍵菜單功能');
  });

• 示例分析：這個(gè)示例通過e.preventDefault()阻止了瀏覽器默認(rèn)的右鍵菜單，并用一個(gè)簡(jiǎn)單的提示框模擬了自定義菜單功能。在實(shí)際應(yīng)用中，這通常是構(gòu)建自定義右鍵菜單的第一步——阻止默認(rèn)菜單后，可以在鼠標(biāo)位置動(dòng)態(tài)顯示一個(gè)自定義的HTML菜單組件。常用于富文本編輯器、文件管理器、畫板應(yīng)用等場(chǎng)景，提供符合應(yīng)用需求的上下文操作選項(xiàng)。

二、總結(jié)列表

以下是JavaScript中11個(gè)常用鼠標(biāo)事件的總結(jié)列表。

三、鼠標(biāo)事件對(duì)象的常用屬性

所有鼠標(biāo)事件都接收一個(gè) MouseEvent 對(duì)象，它包含以下常用屬性：

四、鼠標(biāo)事件的注意事項(xiàng)

1. 事件冒泡與捕獲：除 mouseenter 和 mouseleave 外，大多數(shù)鼠標(biāo)事件都支持冒泡。這意味著事件會(huì)從目標(biāo)元素向上傳播到父元素。

2. 事件依賴關(guān)系：click 事件依賴于 mousedown 和 mouseup 的完整觸發(fā)，dblclick 依賴于兩次連續(xù)的 click 事件。

3. 性能考慮：mousemove 事件會(huì)高頻觸發(fā)，監(jiān)聽函數(shù)中應(yīng)避免執(zhí)行復(fù)雜的計(jì)算或DOM操作。

4. 瀏覽器兼容性：mouseenter 和 mouseleave 是DOM3級(jí)事件，現(xiàn)代瀏覽器都支持，但在非常舊的瀏覽器中可能需要回退方案。

5. 右鍵菜單阻止：使用 contextmenu 事件并調(diào)用 preventDefault() 可以自定義右鍵菜單，但某些瀏覽器可能允許用戶通過瀏覽器設(shè)置強(qiáng)制顯示默認(rèn)菜單。

五、綜合示例

以下示例演示了如何在同一個(gè)元素上監(jiān)聽多個(gè)鼠標(biāo)事件，并對(duì)每個(gè)事件做出響應(yīng)：

<div id="demo" style="width:300px;height:300px;background:#f0f0f0;padding:20px;border:2px solid #ccc;">
  <h3>鼠標(biāo)交互區(qū)域</h3>
  <p>嘗試不同的鼠標(biāo)操作：點(diǎn)擊、雙擊、右鍵、進(jìn)入/離開、移動(dòng)</p>
  <div id="nested" style="width:200px;height:100px;background:#d0d0d0;margin-top:10px;padding:10px;">
    嵌套子元素
  </div>
</div>
<div id="log" style="margin-top:20px;padding:10px;background:#e0e0e0;height:150px;overflow:auto;"></div>

<script>
const demo = document.getElementById('demo');
const nested = document.getElementById('nested');
const log = document.getElementById('log');

function logEvent(eventName, e) {
  const time = new Date().toLocaleTimeString();
  const message = `[${time}] ${eventName} - 目標(biāo): ${e.target.tagName}, 位置: (${e.clientX}, ${e.clientY})`;
  
  const entry = document.createElement('div');
  entry.textContent = message;
  log.appendChild(entry);
  log.scrollTop = log.scrollHeight; // 自動(dòng)滾動(dòng)到底部
}

// 基礎(chǔ)點(diǎn)擊事件
demo.addEventListener('click', (e) => logEvent('click', e));
demo.addEventListener('dblclick', (e) => logEvent('dblclick', e));
demo.addEventListener('mousedown', (e) => logEvent('mousedown', e));
demo.addEventListener('mouseup', (e) => logEvent('mouseup', e));

// 移動(dòng)事件（添加節(jié)流）
let lastMove = 0;
demo.addEventListener('mousemove', (e) => {
  const now = Date.now();
  if (now - lastMove > 100) { // 限制每秒最多10次
    lastMove = now;
    logEvent('mousemove (節(jié)流)', e);
  }
});

// 進(jìn)入/離開事件 - 對(duì)比mouseover/mouseout與mouseenter/mouseleave
demo.addEventListener('mouseover', (e) => logEvent('mouseover', e));
demo.addEventListener('mouseout', (e) => logEvent('mouseout', e));
demo.addEventListener('mouseenter', (e) => logEvent('mouseenter', e));
demo.addEventListener('mouseleave', (e) => logEvent('mouseleave', e));

// 右鍵菜單
demo.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  logEvent('contextmenu (自定義)', e);
});

// 滾輪事件
demo.addEventListener('wheel', (e) => {
  logEvent('wheel - deltaY: ' + e.deltaY, e);
  // 不阻止默認(rèn)行為，保持頁(yè)面可滾動(dòng)
});

// 演示relatedTarget
demo.addEventListener('mouseover', (e) => {
  if (e.relatedTarget) {
    console.log('mouseover - 來自:', e.relatedTarget.tagName);
  }
});

demo.addEventListener('mouseout', (e) => {
  if (e.relatedTarget) {
    console.log('mouseout - 前往:', e.relatedTarget.tagName);
  }
});
</script>

綜合示例分析：

這個(gè)綜合示例創(chuàng)建了一個(gè)完整的鼠標(biāo)事件演示環(huán)境。通過日志面板，可以直觀地看到：

• 當(dāng)在不同區(qū)域（主區(qū)域和嵌套子元素）執(zhí)行鼠標(biāo)操作時(shí)，各種事件的觸發(fā)順序和頻率

• mouseover/mouseout與mouseenter/mouseleave的行為差異：前者在進(jìn)入/離開子元素時(shí)會(huì)反復(fù)觸發(fā)，后者只在進(jìn)入/離開整個(gè)元素時(shí)觸發(fā)一次

• mousemove事件的節(jié)流處理，避免日志過快刷新

• 自定義右鍵菜單的阻止和顯示

• 滾輪事件的滾動(dòng)量信息

通過運(yùn)行這個(gè)示例并觀察日志輸出，可以更深入地理解每個(gè)鼠標(biāo)事件的特性和適用場(chǎng)景。

總結(jié)

到此這篇關(guān)于JavaScript鼠標(biāo)事件的文章就介紹到這了,更多相關(guān)JS鼠標(biāo)事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論