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

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 AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
dblclick eventChrome Full support 1Edge Full support 12Firefox Full support 6
Notes
Full support 6
Notes
Notes Starting in Firefox 68, dblclick events are only sent for the primary mouse button, per the specification.
IE Full support 11Opera Full support 11.6Safari Full support 3WebView Android No support NoChrome Android No support NoFirefox Android Full support 6Opera Android Full support 12.1Safari iOS Full support 1Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

See also