> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/event/propagation/stop.md).

# stop propagation

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

{% hint style="success" %}
At any point, an [**event handler**](/web/browser/event/handler.md) 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 clickable paragraph](/web/browser/event/propagation/stop/button-in-p.md)
* [draw dots](/web/browser/event/type/mouse/click/draw-dots.md)
  {% 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 %}