jQuery Double Click

Filed Under: jQuery

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:

  • dblclick()

In this, dblclick() method is used without an argument.

  • dblclick(handler)

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.


<!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.

jQuery Double Click Demo

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages