JS學習筆記#10 | JavaScript 事件處理與阻止

undefined on Tenor

JavaScript 的事件處理是網頁開發中的重要部分，本文將介紹兩個常用的方法：event.stopPropagation() 與 event.preventDefault()，並簡要說明它們的作用與使用情境。

事件物件 event

當網頁觸發某個事件時，瀏覽器會自動生成一個事件物件，稱為 event，此物件包含事件的相關資訊，如觸發事件的 DOM 元素和觸發原因等。

1. event.stopPropagation()

背景知識：事件冒泡

當一個 DOM 元素的事件被觸發後，該事件會沿著 DOM 樹從內到外傳播，這種現象稱為「事件冒泡」。

範例： 假設我們有以下結構：

<div id="outer">
  <div id="middle">
    <button id="inner">點我</button>
  </div>
</div>

若為三個元素（outer、middle、inner）分別設置 click 事件，當點擊 inner 時，外層的 middle 和 outer 事件也會被觸發。

解決方法：阻止事件冒泡

使用 event.stopPropagation() 可以有效地阻止事件冒泡，僅觸發目標元素的事件，而不會傳播到外層元素。

範例：

document.getElementById('inner').addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('僅執行內層按鈕事件');
});

效果：點擊 inner 按鈕只觸發 inner 的 click 事件。

2. event.preventDefault()

功能：取消事件的預設行為

某些 DOM 元素（如 <a> 超連結或 <form> 表單）會有預設行為。例如，點擊 <a> 超連結會跳轉到指定的網址。若不希望執行此預設行為，可使用 event.preventDefault()。

範例：

HTML:

<a id="clickMe" href="https://example.com">跳轉到 Example</a>

JavaScript:

document.getElementById('clickMe').addEventListener('click', (event) => {
  event.preventDefault();
  console.log('阻止跳轉，執行自定義邏輯');
});

效果：點擊連結後，頁面不會跳轉，但會執行 console.log。

某些情境下：return false 的作用

在某些情境下，我們會使用 return false 來取消事件的執行。但需注意：

• return false 只能取消 DOM 元素的預設行為。
• 無法阻止事件冒泡。

範例：

document.getElementById('clickMe').onclick = function () {
  console.log('僅取消預設行為，無法阻止冒泡');
  return false;
};

總結

• event.stopPropagation() : 阻止事件冒泡，不希望事件傳播到父層元素時。
• event.preventDefault() : 取消事件的預設行為，禁止預設功能（如連結跳轉、表單提交）時。
• return false : 僅取消預設行為，無法阻止冒泡，用於簡單的事件處理。