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


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


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

card.addEventListener('dblclick', function (e) {


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


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



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.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
dblclick eventChrome Full support 1Edge Full support 12Firefox Full support 6
Full support 6
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


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

See also