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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
dblclick event | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
6
| 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.