.dblclick()

Categories: Events > Mouse Events

.dblclick( handler(eventObject) ) 返回： 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事件触发需要以下几点：

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

在同一个元素上绑定click 和 dblclick时间是不明智的。在不同浏览器上这个事件的触发顺序是多样的，一些接受两个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:

jQuery 1.6 API 中文版由脚本之家整理、修订 (2011年6月)