Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery dblclick() Method
jQuery | dblclick() Method: Learn about the jQuery dblclick() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 22, 2022
dblclick() Method
Events in jQuery are the actions that the user performs on the web page. It can be anything – related to mouse clicks, keyboard presses, etc. Using jQuery, we can control these events in the order we want and can also attach some custom functions to it if needed. That means, we can use predefined event methods for the actions and also define a function that gets fired when the event method is triggered. Overall, this makes the website more dynamic on the user's end. Let's learn about the dblclick() method here.
Whenever the selected element is double-clicked on the web page, the dblclick event occurs, which further triggers the dblclick() method. If any function is attached to it, then the function also gets fired along. Using dblclick() method, we can perform various other tasks related to the element.
dblclick() Method Syntax
$('selector').dblclick();
$('selector').dblclick(function(){});
The dblclick() method accepts an optional parameter – function. It can be defined according to the need to perform some other tasks on the element. Other than that, the element on which the dblclick event has to be attached is specified over here.
The Below given example shows the implementation of the dblclick() method where when the image is clicked twice, the event gets triggered.
jQuery dblclick() Method Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>jQuery Event - Double Click</h2>
<p>Click the following Image to implement the dblclick() method in jQuery.</p>
<hr>
<img style="height: 200px;" id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
<hr>
<h3></h3>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('img').dblclick(function(){
$('h3').html('Image has been Double Clicked !!!');
})
});
</script>
</html>
Output:
