# button in clickable paragraph

[browser](../../..) ⟩ [event](../..) ⟩ [propagation](..) ⟩ [stop]() ⟩ 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 %}
