jQuery dblclick() Event

The jQuery double click event triggers on double click on the selected element.

Syntax of Double Click Event

$(selector).dblclick(function)

The selector is the element on which double click event trigger. The function is an optional parameter. This function is called when element is double clicked.

Example

<p>Double click on this text.</p> 

<script>
(function( $ ) {
$("p").dblclick(function(){  
alert("This text is double clicked.");  
});  
})(jQuery);
</script>

Output of the above code

Double click on this text.

In the above example, an alert message is displayed when the user double click on the paragraph.

Example

<style>
.sliderDiv {
width: 300px; 
height: 100px;
padding: 10px;
background-color: pink;
font-size: 25px;
}
</style>

<div id="slider" class="sliderDiv">Some content goes here</div>
<button id="slidediv">Click Here</button> 

<script>
(function( $ ) {
$("button#slidediv").dblclick(function(){  
$("div#slider").slideToggle('slow');
});  
})(jQuery);
</script>

Output of the above code

Some content goes here

In the above example, when the user double click on the button of id 'slidediv', the div box is slided up or down.