# "dblclick"

[browser](https://lochiwei.gitbook.io/web/browser) ⟩ [event](https://lochiwei.gitbook.io/web/browser/event) ⟩ [type](https://lochiwei.gitbook.io/web/browser/event/type) ⟩ [mouse](https://lochiwei.gitbook.io/web/browser/event/type/mouse) ⟩ "dblclick" 

{% hint style="success" %}
If <mark style="color:yellow;">**two clicks**</mark> happen close together, a "<mark style="color:purple;">**dblclick**</mark>" (<mark style="color:yellow;">**double-click**</mark>) event also fires, <mark style="color:red;">**after**</mark>**&#x20;**<mark style="color:yellow;">**the**</mark>**&#x20;**<mark style="color:orange;">**second**</mark>**&#x20;**<mark style="color:yellow;">**"click" event**</mark>, that is：

* mousedown -> mouseup -> click ->&#x20;
* mousedown -> mouseup -> click ->&#x20;
* dblclick&#x20;
  {% endhint %}

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

* 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', 'dblclick'].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 %}