JavaScript Element dblclick Event

What You’ll Learn

The dblclick event fires when a pointing device double-clicks an element. Learn addEventListener vs ondblclick, order vs click, MouseEvent coordinates, UX tips, and five try-it labs.

Introduction

A double-click is two rapid primary-button clicks on the same element. Desktop apps often use it for shortcuts: rename a file, zoom a map, expand a card, or open an item.

In the DOM, dblclick arrives after two click events have already fired. That means a double-click also runs any click listeners twice unless you design carefully.

Understanding dblclick

An instance event that answers: “Was this element double-clicked with a pointing device?”

• Fires on a rapid double primary-button click.
• Order — after two click events (each after mousedown + mouseup).
• MouseEvent — coordinates, button, modifier keys.
• Handler — ondblclick or addEventListener("dblclick", ...).
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("dblclick", (event) => { });

ondblclick = (event) => { };

Event type

A MouseEvent (inherits from UIEvent and Event).

Handy properties

🔁 Event Order

1. mousedown → mouseup → click (first click)
2. mousedown → mouseup → click (second click)
3. dblclick

If both click and dblclick handlers change the same UI, the first click may run before your double-click intent is clear. Prefer separate targets or delayed single-click logic only when you truly need it.

⚖️ dblclick vs click

Examples Gallery

Examples follow MDN Element: dblclick event. Double-click the demo targets with a mouse (or trackpad).

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

card.addEventListener("dblclick", (e) => {
  card.classList.toggle("large");
});

Card scales up / down on each double-click

const box = document.getElementById("box");

box.ondblclick = () => {
  box.textContent = "Double-clicked!";
};

Double-clicked!

const area = document.getElementById("area");
const out = document.getElementById("out");

area.addEventListener("dblclick", (event) => {
  out.textContent = "x=" + event.clientX + ", y=" + event.clientY;
});

x=118, y=74

const target = document.getElementById("target");
const out = document.getElementById("out");
let n = 0;

target.addEventListener("dblclick", () => {
  n += 1;
  out.textContent = "dblclick count: " + n;
});

dblclick count: 3

const el = document.getElementById("el");
const log = document.getElementById("log");

function add(msg) {
  log.textContent += msg + "\n";
}

el.addEventListener("click", () => add("click"));
el.addEventListener("dblclick", () => add("dblclick"));

click
click
dblclick

🚀 Common Use Cases

• Expanding or resizing a card (MDN’s classic demo).
• Starting inline rename on a file or list item.
• Zooming a map or image preview.
• Opening a detail view as a power-user shortcut.
• Selecting a word / paragraph in custom editors (browser default often does this too).

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Two click events fire before dblclick.
• Touch double-tap support is inconsistent—provide another control.
• Related learning: click, cut, DOMActivate, addEventListener(), JavaScript hub.

💡 Best Practices