jQuery dblclick() function fires when an HTML element is double clicked. This method will attach an event handler to the double click event. We can do desired manipulations on the selected HTML element using the jQuery double click event handler.
jQuery double click
jQuery double click event syntax:
In this, dblclick() method is used without an argument.
The handler could be any function that is executed each time the double click event is fired.
jQuery Double Click Example
Following example demonstrates the use of jQuery dblclick() event method.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>jQuery Double Click</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ $("div").dblclick(function(){ $( this ).toggleClass("divClass2"); }); }); </script> <style> .divClass1 { padding:5px; text-align:center; background-color:yellow; border:solid 1px; } .divClass2 { padding:5px; text-align:center; background-color:grey; border:solid 1px; } </style> </head> <body> <div class="divClass1">JournalDev</div> </body> </html> |
In this example, you can see that dblclick() method is triggered when you double click on the <div> element.
In this method, we pass a handler to change the background color of the <div> element.
The toggleClass() method toggle between the two CSS class defined in the above code. The toggleClass() method executes each time when we double click on the element.
You can see above jQuery example in action by visiting below URL.