# "click"

[browser](../../..) ⟩ [event](../..) ⟩ [type](..) ⟩ [mouse]() ⟩ "click"&#x20;

{% hint style="success" %}
<mark style="color:red;">**After**</mark> the "<mark style="color:purple;">**mouseup**</mark>" event, a "<mark style="color:orange;">**click**</mark>" event fires on the <mark style="color:yellow;">**most specific node**</mark> that contained <mark style="color:red;">**both**</mark> the <mark style="color:yellow;">**press**</mark> and the <mark style="color:yellow;">**release**</mark> of the button.&#x20;

For example： "mousedown" on \<p> #1,  then "mouseup" on \<p> #2, the `"click"` event will happen on the parent that contains both \<p>.
{% endhint %}

{% tabs %}
{% tab title="🗺️ 圖表" %}
<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FPttuulGLjF0Ew9SJATuG%2Fmouse.event.coords.svg?alt=media&#x26;token=fdc0e25b-16c4-4e1b-a21f-a3963763c9f6" alt="mouse event coordinates" class="gitbook-drawing">

:point\_right: compare：[+boxes](../../../dom/type/element/+boxes "mention")

<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FuIz4w8DHIuWAyAlrkbsP%2Felement%2Bboxes.svg?alt=media&#x26;token=58faf8bb-c454-48ac-ae48-5f70eb363679" alt="Element+boxes" class="gitbook-drawing">
{% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="danger" %}
If you <mark style="color:yellow;">**tap**</mark> the screen, you’ll get

* [**touch events**](../touch)："[touchstart](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event)", "[touchend](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event)", <mark style="color:yellow;">**then**</mark>
* [**mouse events**]()："mousedown", "mouseup", "<mark style="color:purple;">**click**</mark>":exclamation:
{% endhint %}
{% endtab %}

{% tab title="💈範例" %}
* [click-to-move-ball](click/click-to-move-ball "mention")
* [draw-dots](click/draw-dots "mention")
* [closing-button-x](click/closing-button-x "mention")
* [click-to-move-ball](click/click-to-move-ball "mention")
* [click-to-slide-carousel](click/click-to-slide-carousel "mention")
* replit ⟩ [mouse "click" event](https://replit.com/@pegasusroe/mouse-click-event#index.js)

```javascript
// general handler
const logTarget = (event, type) => {
    const len = 'mousedown'.length;
    const t = event.target;
    log(`🔘 ${type.padEnd(len, ' ')}: <${t.nodeName}> ${t.id ? '#' + t.id : ''}`);
};

// register handlers for mouse events
['mousedown', 'mouseup', 'click'].forEach(type => {
    window['on' + type] = e => logTarget(e, type);
})
```
{% endtab %}

{% tab title="📗 參考" %}
* [ ] Eloquent JS ⟩ [Ch. 15: Event Handling](https://eloquentjavascript.net/15_event.html) ⟩ [Mouse Clicks](https://eloquentjavascript.net/15_event.html#i_D5iwImkmyt)
{% endtab %}

{% tab title="📘 手冊" %}
* [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) ⟩ [UIEvent](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ⟩ [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) ⟩&#x20;
  * [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)
{% endtab %}
{% endtabs %}
