# stop propagation

[browser](../..) ⟩ [event](..) ⟩ [propagation]() ⟩ stop

{% hint style="success" %}
At any point, an [**event handler**](../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](stop/button-in-p "mention")
* [draw-dots](../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 %}
