Web/API/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 EventsThe definition of 'dblclick' in that specification.	Working Draft
Document Object Model (DOM) Level 3 Events SpecificationThe definition of 'dblclick' in that specification.	Obsolete

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`dblclick` event	Chrome Full support 1	Edge Full support 12	Firefox 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 11	Opera Full support 11.6	Safari Full support 3	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 6	Opera Android Full support 12.1	Safari iOS Full support 1	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.