jQuery Dblclick Event

What You’ll Learn

The dblclick event fires when the user double-clicks an element — two full click gestures within a short time window. This tutorial covers binding with .on("dblclick"), passing eventData, triggering with .trigger("dblclick"), the four-step mouse sequence that produces a double-click, and why you should avoid binding both click and dblclick on the same node.

Introduction

Single clicks handle everyday actions — select, submit, navigate. Double-clicks unlock a second tier: rename a file, open a document, zoom a map, or edit inline text. jQuery’s dblclick event lets your code respond when the user completes that faster two-click gesture on any HTML element.

The official jQuery API distinguishes the dblclick event (bound with .on("dblclick") since 1.7) from the deprecated .dblclick() method. To fire a handler programmatically, use .trigger("dblclick") — available since jQuery 1.0.

Understanding the dblclick Event

The dblclick event is sent to an element when the pointer is over it and the user performs two complete click cycles — press, release, press again, release again — all inside the element and within the operating system’s double-click time limit. jQuery normalizes this across browsers and supplies an event object with event.target, coordinates, and standard methods.

The jQuery documentation warns that binding handlers to both click and dblclick on the same element is inadvisable. Browser behavior varies: some emit two click events before dblclick, others one. Double-click sensitivity also differs by OS, browser, and user settings.

📝 Syntax

The modern jQuery API for the dblclick event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("dblclick" [, eventData ], handler) (since 1.7)

.on( "dblclick" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data.
• handler — function called each time dblclick fires: function( event ) { ... }.

2. Event delegation — .on("dblclick", selector, handler)

$( "#list" ).on( "dblclick", "li", function( event ) {
  // runs when any li inside #list is double-clicked
} );

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

.trigger( "dblclick" )

• Runs bound dblclick handlers programmatically.
• Use .triggerHandler("dblclick") to run handlers without bubbling side effects.

4. Unbind — .off("dblclick" [, selector] [, handler])

$( "#target" ).off( "dblclick" );           // remove all dblclick handlers
$( "#list" ).off( "dblclick", "li", fn );   // remove delegated handler

Official jQuery API example

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

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

Return value

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

Examples Gallery

Examples 1–4 follow the official jQuery API documentation. Example 5 shows delegated double-click on a list and a safe click+dblclick delay pattern. Use the Try-it links — double-click inside the demo area to test.

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

User double-clicks #target → alert: "Handler for dblclick called."

Single clicks do not fire this handler

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

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

Double-click #target directly → alert runs

Single-click #other → $("#target").trigger("dblclick") → same alert


Programmatic trigger invokes bound handlers

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

Double-click any paragraph → alert: "Hello World!"

Each p element has its own handler via the shared selector

var divdbl = $( "div" ).first();

divdbl.on( "dblclick", function() {
  divdbl.toggleClass( "dbl" );
} );

Double-click the blue block → toggles .dbl class (yellow background)

Double-click again → toggles back to blue

var clickTimer = null;

$( "#list" ).on( "click", "li", function() {
  var el = this;
  clearTimeout( clickTimer );
  clickTimer = setTimeout( function() {
    $( el ).addClass( "selected" ).siblings().removeClass( "selected" );
    $( "#out" ).text( "Selected: " + $( el ).text() );
  }, 300 );
} );

$( "#list" ).on( "dblclick", "li", function() {
  clearTimeout( clickTimer );
  $( "#out" ).text( "Edit mode: " + $( this ).text() );
  $( this ).addClass( "editing" );
} );

Single-click li → after 300ms → .selected, log "Selected: …"

Double-click li → cancels click timer → .editing, log "Edit mode: …"

Delegation covers items added later via .append()

🚀 Common Use Cases

• Inline rename — double-click a file or folder name to switch to an input field.
• Text selection expand — double-click a word to select it in editors and document viewers.
• Map zoom — double-click to zoom in on a geographic point.
• Table row edit — delegated $("#grid").on("dblclick", "tr", fn) for spreadsheet-style UIs.
• Proxy triggers — $("#shortcut").on("click", function(){ $("#doc").trigger("dblclick"); }) for keyboard-accessible alternatives.
• EventData labels — $(".tile").on("dblclick", { action: "open" }, fn) to pass metadata without closures.

📝 Notes

• Bind with .on("dblclick", handler) since jQuery 1.7 — not the deprecated .dblclick(handler) shorthand.
• Trigger with .trigger("dblclick") since jQuery 1.0.
• Avoid binding both click and dblclick on the same element without a delay pattern — browser click counts vary.
• Double-click sensitivity is OS-, browser-, and often user-configurable — do not hard-code exact millisecond values for all users.
• Any HTML element can receive the dblclick event — not limited to buttons or links.
• Use .off("dblclick") to remove handlers — avoid deprecated .unbind("dblclick").
• Touch devices may not fire dblclick reliably — provide alternative gestures for mobile users.

💡 Best Practices