> 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/button-in-p.md).

# button in clickable paragraph

[browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ [propagation](/web/browser/event/propagation.md) ⟩ [stop](/web/browser/event/propagation/stop.md) ⟩ example ⟩ button in paragraph

{% hint style="success" %}
if the button is <mark style="color:yellow;">**right-clicked**</mark>, the event will <mark style="color:yellow;">**stop propagation**</mark> to its enclosing paragraph.
{% endhint %}

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

* replit > [button in clickable paragraph](https://replit.com/@pegasusroe/event-button-in-clickable-paragraph#index.js)

```javascript
const {log} = console

// ⭐️ import
import { $ } from './js/ext/Node_ext.js'; // Node extension
// --------------------------------------------------------------------

// ⭐️ event handlers

// <button>
$('button').onmousedown = function(e) {
    log(`🐭`);
    // ⭐️ if right-clicked, stop event propagation.
    if (e.button === 2) e.stopPropagation();
};

// <p>
$('p').onmousedown = function() {
    log(`🅿️`);
};
```

{% endtab %}

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

* [ ] Eloquent JS ⟩ [Ch. 15: Event Handling](https://eloquentjavascript.net/15_event.html) ⟩ [Propagation](https://eloquentjavascript.net/15_event.html#h_NEhx0cDpml)
  {% 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 %}