🔰stop propagation

browser ⟩ event ⟩ propagation ⟩ stop

At any point, an event handler can call stopPropagation() on the event object to prevent handlers further up from receiving the event.

This can be useful when, for example, you have a button inside another clickable element and you don’t want clicks on the button to activate the outer element’s click behavior.

🧨 雷區

stopImmediatePropagation()

• won't stop other events' handlers on the same element from propagation❗

• it only stops subsequent handlers on the same event of the same element❗

⭐️ 重點

• stopPropagation(): cancel the propagation of events. (other handlers defined on the same object will still be invoked)

• stopImmediatePropagation(): also prevents the invocation of any subsequent event handlers registered on the same object.

💈範例

• button in clickable paragraph

• draw dots

📗 參考

• Eloquent JS ⟩ Ch. 15: Event Handling

📘 手冊

• Event ⟩

  • preventDefault()

  • stopPropagation()

  • stopImmediatePropagation()