jQuery dblclick Event

What Is the dblclick Event?

dblclick is sent when an element is double-clicked. Bind it with .on("dblclick", handler) (jQuery 1.7+). Any HTML element can receive it.

$("#target").on("dblclick", function () { ... })
$("#target").trigger("dblclick")

// Needs two clicks inside the element
// (down → up → down → up, within the OS window)
// Prefer on/trigger — not the deprecated .dblclick()

How to Use dblclick

Select an element, bind with .on, optionally trigger from code.

1. Select the element(s): $("#box"), $("p"), etc.
2. Bind: .on("dblclick", function (event) { ... }).
3. Double-click the element (or call .trigger("dblclick")).
4. Unbind with .off("dblclick") when needed.

Pseudocode

function onDblclick(element, handler):
    when press + release inside element
     and press + release again inside element
     within the system double-click window:
        handler(event)

trigger(element, "dblclick"):
    run all dblclick handlers on element

Cheat Sheet

Keep these facts handy while wiring double-click handlers.

Live Preview

Run presets that use .on("dblclick") and .trigger("dblclick") (simulated with trigger so you can click once).

Handler for dblclick called.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

$("#target").on("dblclick", function () {
  console.log("Handler for dblclick called.");
});

Handler for dblclick called.

$("#target").on("dblclick", function () {
  console.log("Handler for dblclick called.");
});

$("#other").on("click", function () {
  $("#target").trigger("dblclick");
});

Handler for dblclick called.

$("p").on("dblclick", function () {
  console.log("Hello World!");
});

Hello World!

var $box = $("#block");

$box.on("dblclick", function () {
  if ($box.text() === "OFF") {
    $box.text("ON");
  } else {
    $box.text("OFF");
  }
});

ON  (then OFF, then ON…)

$("#list").on("dblclick", "li", function () {
  console.log("Edit: " + $(this).text());
});

// Later…
$("#list").append("<li>New file</li>");
// New file is double-clickable too — no extra bind

Edit: New file

Performance Notes

Delegation scales better than binding hundreds of individual handlers. If you must support both click and dblclick, keep the delay short and clear timers promptly to avoid leaked timeouts.

Key Takeaways