jQuery dblclick()
jQuery dblclick() method attaches an event listener to listen for mouse double click events on the HTML Element(s). When a user double clicks on the element, the event listener is triggered and the function inside the dblclick() method is executed.
jquery dblclick() method could be called on HTML Element(s) filtered via jQuery Selector.
In this tutorial, you will learn about jQuery dblclick() method, its syntax and usage, with examples.
Syntax – jQuery dblclick()
The following is the syntax to use jQuery dblclick() method :
To attach a double click listener to HTML Element(s),
$("selector").dblclick(function(){
// your javascript/jquery statements here
});Examples – jQuery dblclick()
The following examples help you understand the usage of jQuery dblclick() method :
1. Example – Display an alert when user double clicks on paragraph elements
In the following example, we have attached a double click listener for all the paragraphs. When user double clicks on a paragraph, the function inside click method is executed. We have an alert method, so an alert would appear.
2. Example – Change Text of paragraph when user double clicks on it
With the help of $(this) and text() methods, when user double clicks on a paragraph, we change the text.
3. Example – Change color of the paragraph that has been double clicked on
$(this) references the element on which the event is triggered. In the following example, when user double clicks on a paragraph, its color is changed to green.
4. Example – Make the paragraph disappear when you double click on it
In the following jQuery click() example, with the help of hide() method, we make a paragraph disappear when user clicks on it.
Conclusion
In this jQuery Tutorial, we have learnt jQuery dblclick() method : Syntax and Usage with examples.