返回值:jQuerydblclick(handler(eventObject))

Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.

This method is a shortcut for .bind('dblclick', handler) in the first variation, and .trigger('dblclick') in the second. The dblclick event is sent to an element when the element is double-clicked. Any HTML element can receive this event. For example, consider the HTML: 

<div id="target">
  Double-click here
</div>
<div id="other">
  Trigger the handler
</div>

The event handler can be bound to any <div>: 

$('#target').dblclick(function() {
  alert('Handler for .dblclick() called.');
});

Now if we double-click on this element, the alert is displayed:

Handler for .dblclick() called.

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

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

After this code executes, (single) clicks on Trigger the handler will also alert the message.

The dblclick event is only triggered after this exact series of events:

  • The mouse button is depressed while the pointer is inside the element.
  • The mouse button is released while the pointer is inside the element.
  • The mouse button is depressed again while the pointer is inside the element, within a time window that is system-dependent.
  • The mouse button is released while the pointer is inside the element.

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events and others only one. If an interface that reacts differently to single- and double-clicks cannot be avoided, then the dblclick event should be simulated within the click handler. We can achieve this by saving a timestamp in the handler, and then comparing the current time to the saved timestamp on subsequent clicks. If the difference is small enough, we can treat the click as a double-click.

示例:

To bind a "Hello World!" alert box the dblclick event on every paragraph on the page:

jQuery 代码:
$("p").dblclick( function () { alert("Hello World!"); });

示例:

Double click to toggle background color.

<!DOCTYPE html>
<html>
<head>
<style>

  div { background:blue;
        color:white;
        height:100px;
        width:150px;
 }
  div.dbl { background:yellow;color:black; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<div></div><span>Double click the block</span>

<script>


    var divdbl = $("div:first");
    divdbl.dblclick(function () { 
      divdbl.toggleClass('dbl'); 
    });



</script>
</body>
</html>
演示: