.dblclick()

.dblclick( handler(eventObject) ) 官网原E文: jQuery

描述: 为 "dblclick" 事件绑定一个处理函数,或者触发元素上的 "dblclick" 事件。

  • version added: 1.0.dblclick( handler(eventObject) )

    handler(eventObject)每次事件触发时会执行的函数。

  • version added: 1.4.3.dblclick( [ eventData ], handler(eventObject) )

    eventData将要传递给事件处理函数的数据映射。

    handler(eventObject)每次事件触发时会执行的函数。

  • version added: 1.0.dblclick()

这个函数的第一种用法是 .bind('dblclick', handler) 的快捷方式,第二种用法是 .bind('dblclick') 的快捷方式。

一个元素被双击时候将触发 dblclick 事件。任何HTML元素都可以收到此事件。

举例来说,请看下面的HTML:

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

这个事件处理器可以绑定到任何

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

现在,如果我们双击这个元素,警报显示:

Handler for .dblclick() called.

当不同的元素被点击时我们也可以触发这个事件:

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

这些代码执行后,单击Trigger the handler同样警报显示。

dblclick事件触发需要以下几点:

  • 鼠标指针在元素里面时点击。
  • 鼠标指针在元素里面时释放。
  • 鼠标指针在元素里面时再次点击,点击间隔时间,是系统而定。
  • 鼠标指针在元素里面时再次释放。

在同一个元素上绑定clickdblclick时间是不明智的。在不同浏览器上这个事件的触发顺序是多样的,一些接受两个click事件,其他接受一个click事件。如果一个接口对于单,双击反应不同是无法避免,那么dblclick事件应该模拟click处理器。我们可以通过在处理器中保存时间戳来实现这一点,然后比较当前时间在后续的点击保存时间戳。如果差异足够小,我们可以把它当作一个双击点击。

Examples:

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

$("p").dblclick( function () { alert("Hello World!"); });

Example: 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="http://code.jquery.com/jquery-latest.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>

Demo: