> 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/type/mouse/click.md).

# "click"

[browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ [type](/web/browser/event/type.md) ⟩ [mouse](/web/browser/event/type/mouse.md) ⟩ "click" 

{% 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&amp;token=fdc0e25b-16c4-4e1b-a21f-a3963763c9f6" alt="mouse event coordinates" class="gitbook-drawing">

:point\_right: compare：[Element+boxes](/web/browser/dom/type/element/+boxes.md)

<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&amp;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**](/web/browser/event/type/touch.md)："[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**](/web/browser/event/type/mouse.md)："mousedown", "mouseup", "<mark style="color:purple;">**click**</mark>":exclamation:
  {% endhint %}
  {% endtab %}

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

* [click to move ball](/web/browser/event/type/mouse/click/click-to-move-ball.md)
* [draw dots](/web/browser/event/type/mouse/click/draw-dots.md)
* [closing button \[x\]](/web/browser/event/type/mouse/click/closing-button-x.md)
* [click to move ball](/web/browser/event/type/mouse/click/click-to-move-ball.md)
* [click to slide (carousel)](/web/browser/event/type/mouse/click/click-to-slide-carousel.md)
* 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 %}