# stop propagation

[browser](https://lochiwei.gitbook.io/web/browser) ⟩ [event](https://lochiwei.gitbook.io/web/browser/event) ⟩ [propagation](https://lochiwei.gitbook.io/web/browser/event/propagation) ⟩ stop

{% hint style="success" %}
At any point, an [**event handler**](https://lochiwei.gitbook.io/web/browser/event/handler) can call [`stopPropagation()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) on the <mark style="color:yellow;">**event object**</mark> to prevent handlers further up from receiving the event.&#x20;

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.
{% endhint %}

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="danger" %}
[stopImmediatePropagation()](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation)

* <mark style="color:red;">**won't**</mark>**&#x20;**<mark style="color:yellow;">**stop**</mark>**&#x20;**<mark style="color:red;">**other**</mark>**&#x20;**<mark style="color:yellow;">**events**</mark>' handlers on the <mark style="color:red;">**same**</mark> <mark style="color:yellow;">**element**</mark> from propagation:exclamation:
* it only stops <mark style="color:orange;">**subsequent**</mark>**&#x20;**<mark style="color:yellow;">**handlers**</mark> on the <mark style="color:red;">**same**</mark>**&#x20;**<mark style="color:yellow;">**event**</mark> of the <mark style="color:red;">**same**</mark>**&#x20;**<mark style="color:yellow;">**element**</mark>:exclamation:
  {% endhint %}
  {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="success" %}

* [stopPropagation()](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation): \
  cancel the propagation of events. (<mark style="color:yellow;">**other handlers**</mark> defined <mark style="color:yellow;">**on the**</mark>**&#x20;**<mark style="color:red;">**same**</mark>**&#x20;**<mark style="color:yellow;">**object**</mark> **will&#x20;**<mark style="color:orange;">**still**</mark>**&#x20;be invoked**)
* [stopImmediatePropagation()](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation): \ <mark style="color:red;">**also prevents**</mark> the invocation of any <mark style="color:orange;">**subsequent**</mark> event handlers registered <mark style="color:yellow;">**on the**</mark>**&#x20;**<mark style="color:red;">**same**</mark>**&#x20;**<mark style="color:yellow;">**object**</mark>.
  {% endhint %}
  {% endtab %}

{% tab title="💈範例" %}

* [button-in-p](https://lochiwei.gitbook.io/web/browser/event/propagation/stop/button-in-p "mention")
* [draw-dots](https://lochiwei.gitbook.io/web/browser/event/type/mouse/click/draw-dots "mention")
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] Eloquent JS ⟩ [Ch. 15: Event Handling](https://eloquentjavascript.net/15_event.html)
  {% endtab %}

{% tab title="📘 手冊" %}

* [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) ⟩
  * [preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
  * [stopPropagation()](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation)
  * [stopImmediatePropagation()](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation)
    {% endtab %}
    {% endtabs %}