jQuery Double-Click Event

The double-click event runs after two rapid clicks on the same element. In current jQuery code, attach it with .on("dblclick", handler).

Syntax Top ↑

$( "element" ).on( "dblclick", function (event) {
    // Double-click code.
});

Double-Click a Button Top ↑

$( function () {
    $( "#b1" ).on( "dblclick", function () {
        $( "#t1" ).text( "You double-clicked the button" );
    });
});

Open the double-click demo →

One Double-Click Handler for a Class Top ↑

$( ".edit_class" ).on( "dblclick", function () {
    // Handle any matching record.
});

Read the ID of the Double-Clicked Element Top ↑

$( ".edit_class" ).on( "dblclick", function () {
    const id = this.id;
    console.log( "Double-clicked ID:", id );
});

Listen for Click and Double-Click Top ↑

$( "#b1" ).on( "click dblclick", function () {
    // Runs for either click type.
});

$( "#b1" ).on( "click dblclick", function (event) {
    $( "#t1" ).text( "Event type: " + event.type );
});

When single-click and double-click trigger different actions, test the interaction carefully because the browser may deliver click events as part of a double-click sequence.

← Click event · Events pillar

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: