Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to handle a double click event using jQuery?
To handle a double click event using jQuery, use the dblclick() event. When an element is double clicked, this event occurs. The dblclick() method triggers the double-click event or attaches a function to run when a double-click event occurs on the selected elements.
Syntax
The basic syntax for the dblclick() method is ?
$(selector).dblclick(function)
Where function is optional and specifies the function to run when the double-click event occurs.
Example
You can try to run the following code to learn how to handle double click event using jQuery ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
alert("You have double-clicked this paragraph!");
});
});
</script>
</head>
<body>
<p style="background-color: lightblue; padding: 20px; cursor: pointer;">Double click this paragraph</p>
</body>
</html>
In this example, when you double-click on the paragraph element, an alert box will appear with the message "You have double-clicked this paragraph!".
Conclusion
The jQuery dblclick() method provides a simple way to handle double-click events on HTML elements. It's commonly used for interactive features like expanding content, editing text, or triggering special actions that require intentional user interaction.
1K+ Views
