jQuery .dblclick() Method

What Is the .dblclick() Method?

.dblclick() is a shorthand for binding or triggering the dblclick event. With a handler it binds; with no arguments it triggers. Prefer .on / .trigger in new code.

$("#box").dblclick(fn)           // bind (deprecated)
$("#box").dblclick(data, fn)     // bind + eventData (deprecated)
$("#box").dblclick()             // trigger (prefer .trigger)

// Modern:
$("#box").on("dblclick", fn)
$("#box").trigger("dblclick")

How to Use .dblclick()

Know the three signatures, then map them to the modern API.

1. Select element(s): $("#box").
2. Bind (legacy): .dblclick(function (event) { ... }).
3. Optional data (1.4.3+): .dblclick({ key: "v" }, handler) → event.data.
4. Trigger (legacy): .dblclick() with no args — or use .trigger("dblclick").

Pseudocode

function dblclick(element, handler?):
    if handler given:
        bind "dblclick" → handler   // like .on("dblclick", handler)
    else:
        trigger "dblclick"          // like .trigger("dblclick")

// Prefer naming the event explicitly with on / trigger

Cheat Sheet

Quick map from shorthand to modern calls.

Live Preview

Run presets that show bind, eventData, and no-arg trigger via .dblclick() (simulated with trigger so you can click once).

Handler ran via .dblclick(fn).

jQuery Examples

Short snippets for legacy .dblclick(). Prefer the modern forms in new work — use Try It Yourself to experiment.

$("#target").dblclick(function () {
  console.log("Handler ran via .dblclick(fn).");
});

Handler ran via .dblclick(fn).

$(".item").dblclick({ action: "open" }, function (event) {
  console.log("action:", event.data.action);
  console.log("label:", $(this).data("label"));
});

action: open
label: File A

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

$("#fire").click(function () {
  $("#target").dblclick();  // same idea as .trigger("dblclick")
});

Handler for dblclick called.

// Legacy
$("#legacy").dblclick(function () {
  console.log("via .dblclick(fn)");
});

// Modern (use this)
$("#modern").on("dblclick", function () {
  console.log("via .on(\"dblclick\", fn)");
});

via .on("dblclick", fn)

Performance Notes

Switching to .on / .trigger does not slow you down — it clarifies intent and unlocks delegation.

Key Takeaways