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).

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.

JavaScript

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

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

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);
}

Result

Specifications

Specification Status
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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
dblclick eventChrome Full support YesEdge Full support YesFirefox Full support YesIE ? Opera ? Safari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

See also