jQuery dblclick() Method attaches a double click event handler function to an html element. This event handler function executes when a user double clicks on the attached html element.
jQuery dblclick() Method Syntax
$(selector).dblclick(function(){
//event handler code. This code will execute
// when a user double clicks on the selected html element.
});
Here $(selector) is a jQuery selector that selects an html element and the dbclick() method attaches that selected element to the event handler function.
jQuery dblclick() Example
In the following example we have attached the double click event handler function to the jQuery selector that selects h2, p and button elements, which means whenever a user double clicks on any of these elements, they will be hidden because in event handler function we are calling hide() method like this: $(this).hide(); that hides the current element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2, p, button").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h2>jQuery double click event example</h2>
<p>This example is published on beginnersbook.com. When you double
click on the heading, paragraph or button, they will be hidden</p>
<button>Button</button>
</body>
</html>
Output:
Before a user double clicks on any html element:
After a user double clicks on the h2 heading:
After a user double clicks on the paragraph:
After a user double clicks on the button:
Blank page with no elements.