The dblclick event fires when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.

dblclick fires after two click events.

Bubbles Yes
Cancelable Yes
Interface MouseEvent
Event handler property ondblclick

Examples

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

HTML

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

CSS

aside {
  background: #fe9;
  border-radius: 1em;
  display: inline-block;
  padding: 1em;
  transform: scale(.9);
  transform-origin: 0 0;
  transition: transform .6s;
}

.large {
  transform: scale(1.3);
}

JavaScript

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

card.addEventListener('dblclick', function (e) {
  card.classList.toggle('large');
});

Result

Specification

Specification Status Comment
UI Events
The definition of 'dblclick' in that specification.
Working Draft  
Document Object Model (DOM) Level 3 Events Specification
The definition of 'dblclick' in that specification.
Obsolete Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
On disabled form elements (Yes)[1] No support (Yes) No support (Yes)[1] ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?
On disabled form elements ? No support ? ? ? ?

[1] Only works for <textarea> elements and some <input> element types.

See also