初學者指南：JavaScript 中的 e.stopPropagation()

更新日期： 2025 年 3 月 9 日

在 JavaScript 中，我們經常需要處理用戶與網頁的互動，例如點擊按鈕、提交表單、觸發滑鼠事件等。

而這些事件有時會被意外地，傳播到其父元素或其他部分，進而引發不必要的操作或混亂。

為了解決這些情況，我們可以使用 e.stopPropagation() 來控制事件的傳播。

這篇文章將為新手介紹什麼是 e.stopPropagation()，如何使用它，以及一些實際應用場景來幫助你更好地理解這個功能。

什麼是 e.stopPropagation()？

e.stopPropagation() 是 JavaScript 中事件物件 (e，代表事件) 的一個方法。

當你對某個事件使用 e.stopPropagation() 時，這個方法的作用是阻止事件繼續傳播到父元素。

在事件的傳播中，當一個元素被點擊時，這個事件會按照「捕獲階段」、「目標階段」，然後「冒泡階段」的順序進行傳播。

這意味著事件會先從最外層節點，傳遞到目標元素（捕獲），接著在目標元素上被處理（目標），然後再從目標元素往外層節點逐層傳遞（冒泡）。

e.stopPropagation() 就是在這個過程中阻止事件冒泡，確保事件不會傳播到更外層的父元素。

為什麼要使用 e.stopPropagation()？

在實際開發中，經常會遇到一些事件無意中觸發父元素上的其他事件處理器，導致一些不期望的行為。

例如，你可能在一個按鈕上綁定了點擊事件，而這個按鈕又在一個容器內部，如果沒有適當控制，點擊按鈕時，容器的事件處理器也會被觸發。

這種情況下，我們可以使用 e.stopPropagation() 來阻止事件從按鈕冒泡到容器，從而只觸發按鈕的事件，而不影響到其他元素。

例子：按鈕在容器內的場景

讓我們用一個簡單的例子來說明。

<div id="container">
  <button id="myButton">點擊我</button>
</div>

<script>
  // 為容器添加點擊事件監聽器
  document.getElementById('container').addEventListener('click', function() {
    console.log('容器被點擊了');
  });

  // 為按鈕添加點擊事件監聽器
  document.getElementById('myButton').addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡
    console.log('按鈕被點擊了');
  });
</script>

在這個例子中，當你點擊按鈕 myButton 時，事件會先觸發按鈕的點擊事件。

由於我們在按鈕的點擊事件中使用了 e.stopPropagation()，這個事件就不會繼續冒泡到父元素 container，所以 container 的點擊事件不會被觸發。

這樣做可以避免不必要的事件觸發，讓事件處理更加精準。

捕獲、冒泡與 e.stopPropagation() 的應用場景

為了理解 e.stopPropagation() 的應用，我們需要理解事件的傳播方式，主要包括兩個階段：

1. 捕獲階段（Capture Phase）：事件從最上層元素開始，一層層向下傳遞，直到目標元素。
2. 冒泡階段（Bubble Phase）：事件從目標元素開始，逐層向上傳遞，直到最上層元素。

在默認情況下，我們添加的事件監聽器通常是在冒泡階段執行的。因此，如果你不想讓某個事件傳播到父元素，你就可以在目標元素上使用 e.stopPropagation()。

何時使用 e.stopPropagation()？

• 避免父元素的額外處理：當你在一個子元素上添加了特定的行為，而不希望這個行為冒泡到父元素上觸發其他操作時，可以使用 e.stopPropagation()。
• 防止重複執行事件處理器：有時候，你可能在父元素和子元素上都綁定了相同類型的事件（例如點擊事件）。如果不使用 e.stopPropagation()，點擊子元素時，父元素的事件也會被觸發，導致同樣的邏輯被執行多次。

例如，你有一個彈出框（modal），裡面有一個關閉按鈕，你希望點擊按鈕時僅關閉彈出框，而不是觸發背景的點擊事件。這時候 e.stopPropagation() 就非常有用了。

圖式說明

以下是事件傳播的圖式說明，幫助你更好地理解捕獲、目標和冒泡的過程：

捕獲階段（Capture Phase）
document -> html -> body -> div -> button

目標階段（Target Phase）
button (目標元素)

冒泡階段（Bubble Phase）
button -> div -> body -> html -> document

當我們使用 e.stopPropagation() 時，事件在冒泡階段會被阻止，無法繼續往上傳播到父層節點。

更多使用案例

彈出框的點擊控制

假設你有一個彈出框（modal），彈出框的背景是灰色的遮罩層，你希望點擊遮罩層時關閉彈出框，但如果點擊彈出框本身或內部按鈕時，不要關閉彈出框。

<div id="modalBackground">
  <div id="modalContent">
    <button id="closeButton">關閉</button>
  </div>
</div>

<script>
  // 點擊遮罩層時關閉彈出框
  document.getElementById('modalBackground').addEventListener('click', function() {
    console.log('遮罩層被點擊，關閉彈出框');
  });

  // 點擊彈出框內容時阻止事件冒泡
  document.getElementById('modalContent').addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡到遮罩層
    console.log('點擊了彈出框內容，不關閉彈出框');
  });

  // 點擊關閉按鈕時關閉彈出框
  document.getElementById('closeButton').addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡到遮罩層
    console.log('按下關閉按鈕，關閉彈出框');
  });
</script>

在這個例子中，點擊遮罩層會關閉彈出框，但點擊彈出框內容或關閉按鈕時，我們使用了 e.stopPropagation()，從而阻止事件冒泡到遮罩層，避免彈出框被關閉。

表單中按鈕的特定操作

假設你有一個表單，裡面有多個按鈕，例如「提交」和「重置」，這些按鈕各自有不同的行為，並且表單本身也有提交的事件處理邏輯。

<form id="myForm">
  <button id="submitButton">提交</button>
  <button id="resetButton">重置</button>
</form>

<script>
  // 為表單添加提交事件監聽器
  document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 防止表單實際提交
    console.log('表單被提交');
  });

  // 為提交按鈕添加點擊事件監聽器
  document.getElementById('submitButton').addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡到表單
    console.log('提交按鈕被點擊');
  });

  // 為重置按鈕添加點擊事件監聽器
  document.getElementById('resetButton').addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡到表單
    console.log('重置按鈕被點擊，但不重置表單');
  });
</script>

在這個例子中，使用 e.stopPropagation() 可以確保每個按鈕只執行其特定的行為，而不觸發表單的其他處理邏輯。

e.stopPropagation() 與 e.preventDefault() 的區別

初學者常常會混淆 e.stopPropagation() 和 e.preventDefault()，這兩者的作用是不同的：

• e.stopPropagation()：阻止事件向上層元素傳播（冒泡或捕獲）。
• e.preventDefault()：阻止事件的默認行為。例如，阻止表單提交或阻止連結的導航。

兩者可以一起使用，也可以單獨使用，具體取決於你的需求。

範例：阻止表單提交與冒泡

<form id="myForm">
  <button id="submitButton">提交</button>
</form>

<script>
  document.getElementById('submitButton').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止表單提交
    e.stopPropagation(); // 阻止事件冒泡
    console.log('提交按鈕被點擊，但表單未提交');
  });
</script>

在這個例子中，e.preventDefault() 阻止了按鈕的默認行為（表單提交），而 e.stopPropagation() 阻止了事件冒泡到父元素 form，確保只執行按鈕的邏輯。

小結

e.stopPropagation() 是 JavaScript 事件處理中非常有用的工具，它能幫助我們精確控制事件的傳播，避免不必要的父元素事件被觸發。

在使用 e.stopPropagation() 時，理解事件的捕獲和冒泡過程至關重要，這樣你才能更靈活地控制網頁中的交互行為。

希望這篇文章能幫助你更好地理解 e.stopPropagation() 的用途，並在日常開發中靈活運用這個強大的工具，讓你的代碼變得更加高效且可控！