It is a commonly used jQuery event method. This method triggers a double-click event when the user double-clicks the html element.
Syntax:
$(selector).dblclick(function);Here, selector is the selected element and function is the optional one. This specifies a function that does a specific task after double clicking.
Example 1:
In this example, we will use the dbclick() method directly without passing the function after the event is triggered.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery dbclick() method</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function(){
$("p").dblclick(function(){
alert("This paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click on the text.</p>
</body>
</html> Example 2:
Here, we will pass the function to the dbclick() method. It will show the action after the event is triggered.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery dbclick() method</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function () {
$("button").dblclick(function () {
$("p").fadeOut();
});
});
</script>
<style>
p {
font-size: 30px;
display: block;
padding: 20px;
color: #ff0000;
border: 1px solid #0000ff;
width: 400px;
text-align: center;
}
</style>
</head>
<body>
<p>The paragraph will disappear</p>
<!-- Double click on this button. The paragraph will disappear -->
<button> Click Me! </button>
</body>
</html> Popular Posts
- Show / Hide div based on dropdown selected using jQuery
- Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
- Custom Authentication Login And Registration Using Laravel 8
- Infinite Scrolling on PHP website using jQuery and Ajax with example
- Google Login or Sign In with Angular Application
- How to Convert MySQL Data to JSON using PHP
- How to change date format in PHP?
- Image Lazy loading Using Slick Slider
- Slick Slider Basic With Example
- php in_array check for multiple values
- Adaptive Height In Slick Slider
- Slick Slider Center Mode With Example
- How to Scroll to an Element with Vue 3 and ?
- JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
- Slick Slider Multiple Items With Example
