Firefox Tomorrow

web api event

Element: dblclick event

View on MDN ↗

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.

addEventListener("dblclick", (event) => { })

ondblclick = (event) => { }

Event type

A MouseEvent. Inherits from UIEvent and Event.

Examples

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

JavaScript

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

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

HTML

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

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also