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.

EventUIEventMouseEvent

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: #ffee99;
  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

See also