The dblclick() is an inbuilt method in jQuery which is used to trigger the double-click event to occur. This method occurs when the selected element will be double clicked.
Syntax:
$(selector).dblclick(args);
Here “selector” is the selected element.
Parameter: It accepts an optional parameter “args” which specifies a function that do a specific task after double clicking.
Return Value: It returns some function when the selected element is double-clicked.
Code #1:
In the below code, no function is passed to this method.
< html > < head > jquery/3.3.1/jquery.min.js"></ script > < script > <!-- jQuery code to show dbclick method --> $(document).ready(function() { $("div").click(function() { $("div").dblclick(); }); </ script > < style > div { display: block; width: 370px; padding: 10px; font-size: 25px; border: 2px solid green; } </ style > </ head > < body > <!-- click on this div and a pop will appear --> < div ondblclick="alert('dblclick event has been triggered') ">Click me to trigger dblclick event</ div > </ body > </ html > |
Output:
Before double clicking the “Click me to trigger dblclick event” button-
After double clicking the “Click me to trigger dblclick event” button-
Code #2:
In the below code, function is passed to dblclick() method.
< html > < head > jquery/3.3.1/jquery.min.js"></ script > < script > <!-- jQuery code to show dbclick method --> $(document).ready(function() { $("button").dblclick(function() { $("p").fadeOut(); }); }); </ script > < style > p { display: block; padding: 20px; color: gree; width: 300px; border: 2px solid green; font-size: 25px; } </ style > </ head > < body > < p >Welcome to GeeksforGeeks !</ p > <!-- click on this button and above paragraph will disappear --> < button > Click Me! </ button > </ body > </ html > |
Output:
Before double clicking the “Click Me” button-
After double clicking the “Click Me” button-
This article is attributed to GeeksforGeeks.org
leave a comment
0 Comments