自己對冒泡事件的誤解

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

Photo by Kari Shea on Unsplash

[DEMO]

• TodoList

[問題描述]

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

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

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

[驗證與結果]

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

• 驗證冒泡事件

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

驗證

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

結果

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

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