Element: dblclick event
=======================

The **`dblclick`** event fires when a pointing device button (such as a mouse's primary button) is double-clicked; that is, when it's rapidly clicked twice on a single element within a very short span of time.

`dblclick` fires after two `click` events (and by extension, after two pairs of `mousedown` and `mouseup` events).

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("dblclick", (event) => {});

ondblclick = (event) => {};
```

Event type
----------

A `MouseEvent`. Inherits from `UIEvent` and `Event`.

Event

UIEvent

MouseEventEvent properties
----------------

*This interface also inherits properties of its parents, `UIEvent` and `Event`.*

`MouseEvent.altKey` Read only 

Returns `true` if the `alt` key was down when the mouse event was fired.

`MouseEvent.button` Read only 

The button number that was pressed (if applicable) when the mouse event was fired.

`MouseEvent.buttons` Read only 

The buttons being pressed (if any) when the mouse event was fired.

`MouseEvent.clientX` Read only 

The X coordinate of the mouse pointer in viewport coordinates.

`MouseEvent.clientY` Read only 

The Y coordinate of the mouse pointer in viewport coordinates.

`MouseEvent.ctrlKey` Read only 

Returns `true` if the `control` key was down when the mouse event was fired.

`MouseEvent.layerX` 
Non-standard
 Read only 

Returns the horizontal coordinate of the event relative to the current layer.

`MouseEvent.layerY` 
Non-standard
 Read only 

Returns the vertical coordinate of the event relative to the current layer.

`MouseEvent.metaKey` Read only 

Returns `true` if the `meta` key was down when the mouse event was fired.

`MouseEvent.movementX` Read only 

The X coordinate of the mouse pointer relative to the position of the last `mousemove` event.

`MouseEvent.movementY` Read only 

The Y coordinate of the mouse pointer relative to the position of the last `mousemove` event.

`MouseEvent.offsetX` Read only 

The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.

`MouseEvent.offsetY` Read only 

The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.

`MouseEvent.pageX` Read only 

The X coordinate of the mouse pointer relative to the whole document.

`MouseEvent.pageY` Read only 

The Y coordinate of the mouse pointer relative to the whole document.

`MouseEvent.relatedTarget` Read only 

The secondary target for the event, if there is one.

`MouseEvent.screenX` Read only 

The X coordinate of the mouse pointer in screen coordinates.

`MouseEvent.screenY` Read only 

The Y coordinate of the mouse pointer in screen coordinates.

`MouseEvent.shiftKey` Read only 

Returns `true` if the `shift` key was down when the mouse event was fired.

`MouseEvent.mozInputSource` 
Non-standard
 Read only 

 The type of device that generated the event (one of the `MOZ_SOURCE_*` constants).
 This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).


`MouseEvent.webkitForce` 
Non-standard
 Read only 

The amount of pressure applied when clicking.

`MouseEvent.x` Read only 

Alias for `MouseEvent.clientX`.

`MouseEvent.y` Read only 

Alias for `MouseEvent.clientY`.

Examples
--------

This example toggles the size of a card when you double click on it.

### JavaScript


```js
const card = document.querySelector("aside");

card.addEventListener("dblclick", (e) => {
  card.classList.toggle("large");
});
```

### HTML


```html
<aside>
  <h3>My Card</h3>
  <p>Double click to resize this object.</p>
</aside>
```

### CSS


```css
aside {
  background: #fe9;
  border-radius: 1em;
  display: inline-block;
  padding: 1em;
  transform: scale(0.9);
  transform-origin: 0 0;
  transition: transform 0.6s;
  user-select: none;
}

.large {
  transform: scale(1.3);
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| UI Events # event-type-dblclick |
| HTML Standard # handler-ondblclick |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Introduction to events
* `auxclick`
* `click`
* `contextmenu`
* `mousedown`
* `mouseup`
* `pointerdown`
* `pointerup`