
jQuery dblclick() method
The jQuery dblclick()
method is used to attach a double-click event handler to the selected element(s). It allows you to define a function that will be executed when a double-click (two consecutive clicks within a short time) occurs on the target element(s).
Here’s the basic syntax of the dblclick()
method:
$(selector).dblclick(handler)
Parameters:
selector
: A selector expression used to select the element(s) to which the event handler will be attached.handler
: The function to be executed when a double-click event occurs on the selected element(s).
Return Value:
The dblclick()
method returns the original jQuery object, allowing for method chaining.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery dblclick() Method Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myButton">Double-Click Me</button>
<script>
$(document).ready(function() {
// Attach double-click event handler to the button
$("#myButton").dblclick(function() {
alert("You double-clicked the button!");
});
});
</script>
</body>
</html>
In this example, we use the dblclick()
method to attach a double-click event handler to the button with the id “myButton.” When the button is double-clicked, the specified function will be executed, and an alert message will be displayed.
When you run the code and double-click the button, you will see an alert with the message “You double-clicked the button!”
The dblclick()
method is useful when you want to trigger an action in response to a double-click event on an element. It can be used for various interactive purposes, such as triggering actions that require a confirmation or providing shortcut functionality to users.