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: 僅取消預設行為，無法阻止冒泡，用於簡單的事件處理。
