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),

</>
Copy
$("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.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    alert("You double clicked a paragraph.");
  });
});
</script>
</head>
<body>

<p>A paragraph.</p>

<p>Another paragraph.</p>

<a>Nothing happens when you click on this, cause this is anchor.<a/>

</body>
</html>

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.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).text("You clicked me.");
  });
});
</script>
</head>
<body>

<p>A paragraph.</p>

<p>Another paragraph.</p>

<a>Nothing happens when you click on this, cause this is anchor.<a/>

</body>
</html>

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.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).css("color","green");
  });
});
</script>
</head>
<body>

<p>A paragraph.</p>

<p>Another paragraph.</p>

<a>Nothing happens when you click on this, cause this is anchor.<a/>

</body>
</html>

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.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).text("You double clicked me !");
  });
});
</script>
</head>
<body>

<p>A paragraph.</p>

<p>Another paragraph.</p>

<a>Nothing happens when you click on this, cause this is anchor.<a/>

</body>
</html>

Conclusion

In this jQuery Tutorial, we have learnt jQuery dblclick() method : Syntax and Usage with examples.