jQuery - ?.dblclick()

.dblclick() in jQuery

What it does

  • The .dblclick() method fires when an element is double-clicked (two quick clicks).

  • It is commonly used to trigger special actions, like editing content, opening dialogs, or changing styles.

Syntax

$(selector).dblclick(function(){
    // code to execute on double-click
});

Example 1: Simple alert on double-click

<button id="btn">Double Click Me</button>

<script>
$("#btn").dblclick(function(){
    alert("Button was double-clicked!");
});
</script>

Example 2: Change style on double-click

<div id="box" style="width:200px; height:100px; background:lightblue;">Double Click Me</div>

<script>
$("#box").dblclick(function(){
    $(this).css("background", "orange");
});
</script>

Key Points

  • Fires only on double-click (not a single click).

  • Can be combined with .click() for different behaviors.

  • Useful for actions like:

    • Editing text inline

    • Opening modal/dialog

    • Special animations

Difference from .click()

Feature .click() .dblclick()
Trigger Single click Double click
Use case Normal button or link click Special or alternate action
Frequency More frequent Less frequent

Example: Click vs Double-Click

$("#box").click(function(){
    console.log("Single click detected");
});

$("#box").dblclick(function(){
    console.log("Double click detected");
});

✅ Result: Single click and double-click are handled separately.

Summary:

  • .dblclick() → triggered only on double-click

  • Works with all elements

  • Often used for special interactions or editing features