.dblclick()

Syntax and Description


.dblclick(handler) 
.dblclick()

handler is a function to execute each time the event is triggered. Return value is the jQuery object, for chaining purposes.

jQuery dblclick binds an event handler to the dblclick JavaScript event, or trigger that event on an element.

.dblclick(handler) is a shortcut for .bind('dblclick', handler). .dblclick() is a shortcut for .trigger('dblclick').

We can also trigger the event when a different element is clicked.


$('#other').click(function() {
    $('#target').dblclick();
});

Bind double click event for paragraph

The following code binds the dblclick event on every paragraph on the page.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--  w w w.j  av a2  s. c  om-->
                var divdbl = $("div");
                divdbl.dblclick(function () { 
                  divdbl.toggleClass('dbl'); 
                });
        });
    </script>
<style>
  div.dbl { background:yellow;color:black; }
</style>
  </head>
  <body>
    <body>
         <div>java2s.com</div><span>Double click the block</span>
    </body>
</html>

Click to view the demo

The code above generates the following result.

double click to slide up

The following code listens to the double click event and does slide up animation after double clicking.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   w w w. j ava2s  . co  m-->
              $("p").dblclick(function () { 
                   $(this).slideUp(); 
              });
        });
    </script>
  </head>
  <body>
    <body>
       <p>java2s .com</p>
       <p>j ava2s.com</p>
    </body>
</html>

Click to view the demo

The code above generates the following result.