返回值:jQuerydblclick(handler(eventObject))

为 JavaScript 的 "dblclick" 事件绑定一个处理函数，或者触发元素上的该事件。

带有参数的该方法是 .bind('dblclick', handler) 的快捷方式，不带参数的该方法是 .trigger('dblclick') 的快捷方式。 当在元素上双击鼠标时，会触发 dblclick 事件。任何 HTML 元素都可以接收该事件。 举例来说，请看下面的HTML： 

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

该事件可以绑定在任何 <div> 上： 

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

现在，在元素上双击鼠标时，就会显示如下提示框：

Handler for .dblclick() called.

我们可以调用不带参数的 .dblclick() 方法，手动触发这个事件： 

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

执行完上述代码之后，单击 Trigger the handler，同样会显示上面的信息。

dblclick 事件，只有在满足以下条件的情况下才能被触发：

  • 鼠标已经被按下，并且鼠标指针在目标元素的内部。
  • 鼠标松开时，鼠标指针依然在该元素的内部。
  • 在系统规定的时间内，再次按下鼠标，并且鼠标指针在目标元素的内部。
  • 鼠标再次被松开时，鼠标指针依然在该元素的内部。

在同一元素上同时绑定 click 和 dblclick 事件是不明智的。不同的浏览器对事件的触发顺序是不一样的。有些浏览器可能会先接收到两次 click 事件，然后再接收 dblclick，而有些浏览器可能只接收到其它的一个事件。双击灵敏度(即两次点击之间的时间间隔)在不同的操作系统及浏览器中通常是不一样的，因为用户可以改变其设定。

示例:

在段落上双击时，显示 "Hello World!" 提示框：

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

示例:

双击时改变背景色。

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

演示: