JavaScript Element dblclick Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word DBLCLICK

Definition

In JavaScript, the dblclick event fires when a pointing-device button (such as a mouse’s primary button) is double-clicked on an element — two rapid clicks within a short time span (MDN).

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for dblclick. Start with this line.

JavaScript
addEventListener("dblclick", fn)
CallWhat it does
addEventListener("dblclick", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("dblclick", …) — no import required.

Library declarations
JavaScript
addEventListener("dblclick", fn)

Parameters

ParameterDescription
Event nameRequired. "dblclick"
Handler propOptional. ondblclick

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Toggle a Label on Double-Click (MDN Idea)

MDN’s card demo, CSS-free: flip a size label when the user double-clicks.

JavaScript
const card = document.querySelector("button.card");
let large = false;

card.addEventListener("dblclick", () => {
  large = !large;
  card.textContent = large
    ? "Double-click me — size: LARGE"
    : "Double-click me — size: normal";
});
Try It Yourself

How It Works

  1. Listen for dblclick. Fires after two rapid clicks (MDN).
  2. Flip a boolean. Tracks whether the “card” is large.
  3. Update textContent. Shows the new size without CSS.
  4. Keep primary UX on click when the action is required, not optional.

Example 2 — Log Double-Click Coordinates

Read clientX / clientY from the MouseEvent.

JavaScript
document.addEventListener("dblclick", (event) => {
  console.log(
    "dblclick at",
    event.clientX + "," + event.clientY
  );
});
Try It Yourself

How It Works

  1. Listen on document. Catches double-clicks anywhere (bubbles).
  2. Read viewport coords. clientX / clientY are from the MouseEvent.
  3. Log or show them. Useful for maps, editors, or hit-testing demos.
  4. Still a mouse-oriented API. Prefer pointer events for pen/touch-first UIs.

Example 3 — See click Then dblclick

Count both events to prove MDN’s firing order.

JavaScript
const target = document.getElementById("target");
let clicks = 0;
let dbls = 0;

target.addEventListener("click", () => {
  clicks += 1;
  console.log("click count:", clicks);
});

target.addEventListener("dblclick", () => {
  dbls += 1;
  console.log("dblclick count:", dbls);
});
Try It Yourself

How It Works

  1. Listen for both events. MDN: dblclick comes after two clicks.
  2. Increment counters. A double-click raises clicks by 2, then dbls by 1.
  3. Avoid double work. If click and dblclick both do heavy work, users feel lag.
  4. Design carefully. Often handle only dblclick for the shortcut, or debounce click.
Compatibility

Browser Support

Element dblclick is Baseline Widely available (MDN: since July 2015). Safe to use in modern and older evergreen browsers.

✓ Baseline · Widely available

dblclick

Fires when a pointing-device button is double-clicked on an element.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
dblclick Excellent

Bottom line: Use for optional shortcuts. Remember: two click events fire before dblclick, and touch double-tap support varies.

Frequently Asked Questions

It fires when a pointing-device button (usually the primary mouse button) is double-clicked on an element — two rapid clicks within a short time span (MDN).
No. MDN marks Element dblclick as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A MouseEvent (inherits from UIEvent and Event). Useful fields include clientX, clientY, button, and modifier keys.
dblclick fires after two click events (and by extension after two pairs of mousedown and mouseup) (MDN).
Usually no. Prefer click for main actions so keyboard and many touch users are included. Use dblclick for optional shortcuts such as rename, zoom, or expand.
Double-tap behavior varies by device and browser. Always provide a single-tap or button alternative for the same action.

Next: DOMActivate

Learn the Element event related to element activation (check its status carefully).

DOMActivate tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element cut Event JavaScript Element DOMActivate Event