自己對冒泡事件的誤解

發表於 | 更新於

前言

最近正著手往全端的技能樹點，然而又重新做了一份 TodoList 的練習，然後因為對冒泡事件的誤解，因此決定寫下來。

DEMO

問題描述

點擊 label 與 checkbox 時，會切換 complete 的狀態，但在 li 上有個雙擊事件，我不希望在快速切換 complete 狀態時會觸發雙擊的事件。

因此我最初的想法是「可能是因為冒泡事件導致的」，畢竟點擊的是包覆在 li 內的 label 與 checkbox 。

於是我在 complete 狀態切換的事件上加入 e.stopPropagation(); 但是沒有效果。

驗證與結果

正當我不理解為何阻止冒泡事件不起作用時，我動手寫了個簡單的小範例，驗證自己的想法有沒有錯誤。

神奇的事情發生了，果然就是我誤會它了…。

驗證

  • 阻止冒泡事件僅限於同一種類型的事件，如範例中的 .box 與 body 若同樣都是 click 事件，那麼阻止冒泡事件就能發揮作用
  • 然而不同類型的事件是無效的，如果將 body 改成雙擊事件觸發，那麼就算阻止了冒泡事件，還是會因為 body 被雙擊而觸發事件

結果

最後我在雙擊的事件中補上判斷，當雙擊的目標是 label 或 checkbox 就離開雙擊事件。

1
if(e.target.nodeName === 'INPUT' || e.target.nodeName === 'LABEL') { return };

0%