Question

我在 li 中有一个按钮，id"my_id"。我用这个元素附加了两个 jQuery 事件

1.

$("#my_id").click(function() { 
    alert('single click');
});

2.

$("#my_id").dblclick(function() {
    alert('double click');
});

但是每次它都给我single click

87

85

77

30

Answer 1

而不是利用更多的 ad-hoc 状态和 setTimeout，原来有一个本地属性称为detail，您可以从event对象访问！

element.onclick = event => {
   if (event.detail === 1) {
     // it was a single click
   } else if (event.detail === 2) {
     // it was a double click
   }
};

现代浏览器甚至 IE-9 都支持它:)

Source:https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

Answer 2

dblclick事件的行为在Quirksmode中解释。

dblclick的事件顺序为：

mousedown

鼠标

点击

mousedown

鼠标

点击

dblclick

此规则的一个例外是（当然）Internet Explorer，其自定义顺序为：

mousedown

鼠标

点击

鼠标

dblclick

正如你所看到的，在同一个元素上一起两个事件将导致额外的调用你的click处理程序。

Answer 3

您需要使用超时来检查第一次点击后是否有另一次点击。

Here is the trick:

// Author:  Jacek Becela
// Source:  http://gist.github.com/399624
// License: MIT
jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}

用法：

$("on").single_double_click(function () {
  alert("Try double-clicking me!")
}, function () {
  alert("Double click detected, I'm hiding")
  $(this).hide()
})

<on>Click Me!</on>

编辑：

如下所述，首选使用本机dblclick事件：http://www.quirksmode.org/dom/events/click.html

或者 jQuery 提供的那个：http://api.jquery.com/dblclick/

Answer 4

现代正确答案是接受答案和 @ kyw 的解决方案之间的混合。您需要超时以防止第一次单击和event.detail检查以防止第二次单击。

const on = document.getElementById('on')
let timer
on.addEventListener('click', event => {
  if (event.detail === 1) {
    timer = setTimeout(() => {
      console.log('click')
    }, 200)
  }
})
on.addEventListener('dblclick', event => {
  clearTimeout(timer)
  console.log('dblclick')
})