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()

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