jQuery .dblclick() Method

What You’ll Learn

The .dblclick() method is jQuery’s legacy shorthand for binding and triggering the dblclick event. This tutorial covers .dblclick(handler) since 1.0, .dblclick(eventData, handler) since 1.4.3, no-argument .dblclick() as a trigger, migration to .on("dblclick") and .trigger("dblclick"), and why the binding form is deprecated since jQuery 3.3. For the modern double-click API, see the jQuery dblclick event tutorial.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .click(), .dblclick(), .keydown(), and dozens more. The .dblclick() method let you bind a double-click handler in one short call: $("#row").dblclick(function(){ ... }). It remains in jQuery 3.x for backward compatibility but is marked deprecated.

Understanding .dblclick() matters when reading older tutorials, Stack Overflow answers, and legacy codebases that handle rename-on-double-click, zoom, and inline-edit patterns. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Modern jQuery splits those roles explicitly — .on("dblclick", handler) for binding and .trigger("dblclick") for firing. This page documents the shorthand API and shows how to migrate.

Understanding the .dblclick() Method

The official jQuery API describes .dblclick() as a way to bind an event handler to the dblclick event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched element and calls it when the user completes two full click cycles inside that element within the OS double-click interval — the same dblclick event that .on("dblclick") handles today.

When you call .dblclick() with no arguments, jQuery synthetically fires the dblclick event on each matched element. Bound handlers run. This trigger behavior is equivalent to .trigger("dblclick").

📝 Syntax

The .dblclick() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("dblclick") is preferred:

1. Bind a handler — .dblclick( handler ) (since 1.0, deprecated 3.3)

.dblclick( handler )

• handler — function executed each time dblclick fires: function( event ) { ... }.
• Returns the jQuery object for chaining.
• Modern replacement: .on( "dblclick", handler ).

2. Bind with eventData — .dblclick( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.dblclick( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "dblclick", eventData, handler ).

3. Trigger the event — .dblclick() (since 1.0)

.dblclick()

• No arguments — triggers dblclick on every matched element.
• Runs bound handlers programmatically.
• Preferred replacement: .trigger( "dblclick" ).

Official jQuery API migration note

// Deprecated binding
$( "#target" ).dblclick( function() {
  alert( "Handler for `dblclick` called." );
} );

// Modern binding
$( "#target" ).on( "dblclick", function() {
  alert( "Handler for `dblclick` called." );
} );

// Deprecated trigger
$( "#target" ).dblclick();

// Modern trigger
$( "#target" ).trigger( "dblclick" );

Return value

• All .dblclick() signatures return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Five examples cover binding, eventData, triggering, migration from .dblclick() to .on("dblclick"), and method chaining. Use the Try-it links and double-click inside the demo area. Remember: binding with .dblclick(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

$( "#target" ).dblclick( function() {
  $( "#out" ).text( "Handler ran via .dblclick(function(){ ... })." );
} );

User double-clicks #target → handler runs

#out text updates to confirm .dblclick(fn) fired

Deprecated — prefer .on("dblclick", fn) for new code

$( ".item" ).dblclick( { action: "open" }, function( event ) {
  var label = $( this ).data( "label" );
  $( "#out" ).text(
    "Double-clicked: " + label + " | eventData.action: " + event.data.action
  );
} );

Double-click File A → "Double-clicked: File A | eventData.action: open"

Double-click File B → same eventData.action on every .item element

Modern equivalent: .on("dblclick", { action: "open" }, fn)

var count = 0;

$( "#target" ).dblclick( function() {
  count++;
  $( "#out" ).text( "Target handler fired (count: " + count + ")" );
} );

$( "#fire" ).click( function() {
  $( "#target" ).dblclick();
} );

Double-click #target directly → count increments

Click #fire → $("#target").dblclick() → same handler runs

No-arg .dblclick() is trigger shorthand — prefer .trigger("dblclick")

$( "#legacy" ).dblclick( function() {
  $( "#out" ).text( "Legacy: .dblclick(function(){ ... }) — deprecated since jQuery 3.3." );
} );

$( "#modern" ).on( "dblclick", function() {
  $( "#out" ).text( "Modern: .on('dblclick', function(){ ... }) — use this for new code." );
} );

Double-click #legacy → legacy deprecation message

Double-click #modern → modern .on("dblclick") message

Behavior is identical — only the API name differs

$( "#panel" )
  .dblclick( function() {
    $( "#out" ).text( "Double-clicked — .has-dbl class was added at setup." );
  } )
  .addClass( "has-dbl" );

On page load → #panel receives .has-dbl class immediately

Double-click #panel → #out updates with confirmation message

.addClass("has-dbl") runs once at setup — not on each double-click

Same chaining works with .on("dblclick", fn).addClass("has-dbl")

🚀 Common Use Cases

• Reading legacy code — recognize $("#row").dblclick(fn) as equivalent to .on("dblclick", fn) when maintaining older projects.
• Inline rename — legacy file managers often used .dblclick(fn) to open rename dialogs — migrate to .on("dblclick") with the same handler logic.
• Proxy triggers — $("#shortcut").click(function(){ $("#target").dblclick(); }) — replace inner no-arg .dblclick() with .trigger("dblclick").
• Shared eventData — $(".item").dblclick({ mode: "edit" }, fn) passes metadata without closures — migrate to .on("dblclick", { mode: "edit" }, fn).
• Stacked handlers — multiple .dblclick(fn) calls on one element run in registration order — same as multiple .on("dblclick", fn) calls.
• Automated testing — test suites may call .dblclick() to simulate double-clicks — consider .trigger("dblclick") for explicit intent.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .dblclick(handler) or .dblclick(eventData, handler) in new code. Use .on("dblclick") instead.
• Bind with .dblclick(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .dblclick() triggers the event since jQuery 1.0 — prefer .trigger("dblclick").
• .dblclick() does not support event delegation — use .on("dblclick", selector, fn) for dynamic lists.
• Avoid binding both .click() and .dblclick() on the same element — browsers may fire extra click events before dblclick.
• Legacy code using .dblclick() still runs in jQuery 3.x — migrate when you refactor those files.
• For the full modern dblclick guide — click conflicts, delegation, and trigger patterns — see the jQuery dblclick event tutorial.

💡 Best Practices