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).
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("dblclick", (event) => {});
ondblclick = (event) => {};
This interface also inherits properties of its parents, UIEvent
and Event
.
-
MouseEvent.altKey
Read only
-
Returns true
if the alt key was down when the mouse event was fired.
-
MouseEvent.button
Read only
-
The button number that was pressed (if applicable) when the mouse event was fired.
-
MouseEvent.buttons
Read only
-
The buttons being pressed (if any) when the mouse event was fired.
-
MouseEvent.clientX
Read only
-
The X coordinate of the mouse pointer in local (DOM content) coordinates.
-
MouseEvent.clientY
Read only
-
The Y coordinate of the mouse pointer in local (DOM content) coordinates.
-
MouseEvent.ctrlKey
Read only
-
Returns true
if the control key was down when the mouse event was fired.
-
MouseEvent.layerX
Non-standard Read only
-
Returns the horizontal coordinate of the event relative to the current layer.
-
MouseEvent.layerY
Non-standard Read only
-
Returns the vertical coordinate of the event relative to the current layer.
-
MouseEvent.metaKey
Read only
-
Returns true
if the meta key was down when the mouse event was fired.
-
MouseEvent.movementX
Read only
-
The X coordinate of the mouse pointer relative to the position of the last mousemove
event.
-
MouseEvent.movementY
Read only
-
The Y coordinate of the mouse pointer relative to the position of the last mousemove
event.
-
MouseEvent.offsetX
Read only
-
The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
-
MouseEvent.offsetY
Read only
-
The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.
-
MouseEvent.pageX
Read only
-
The X coordinate of the mouse pointer relative to the whole document.
-
MouseEvent.pageY
Read only
-
The Y coordinate of the mouse pointer relative to the whole document.
-
MouseEvent.relatedTarget
Read only
-
The secondary target for the event, if there is one.
-
MouseEvent.screenX
Read only
-
The X coordinate of the mouse pointer in global (screen) coordinates.
-
MouseEvent.screenY
Read only
-
The Y coordinate of the mouse pointer in global (screen) coordinates.
-
MouseEvent.shiftKey
Read only
-
Returns true
if the shift key was down when the mouse event was fired.
-
MouseEvent.mozInputSource
Non-standard Read only
-
The type of device that generated the event (one of the MOZ_SOURCE_*
constants). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).
-
MouseEvent.webkitForce
Non-standard Read only
-
The amount of pressure applied when clicking.
-
MouseEvent.x
Read only
-
Alias for MouseEvent.clientX
.
-
MouseEvent.y
Read only
-
Alias for MouseEvent.clientY
.
This example toggles the size of a card when you double click on it.
const card = document.querySelector("aside");
card.addEventListener("dblclick", (e) => {
card.classList.toggle("large");
});
<aside>
<h3>My Card</h3>
<p>Double click to resize this object.</p>
</aside>
aside {
background: #fe9;
border-radius: 1em;
display: inline-block;
padding: 1em;
transform: scale(0.9);
transform-origin: 0 0;
transition: transform 0.6s;
user-select: none;
}
.large {
transform: scale(1.3);
}