如何区分单击事件和双击事件 (double click)

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

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

1.

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

2.

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

但是每次它都给我single click

87

而不是利用更多的 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
85

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

dblclick的事件顺序为:

mousedown

鼠标

点击

mousedown

鼠标

点击

dblclick

此规则的一个例外是(当然)Internet Explorer,其自定义顺序为:

mousedown

鼠标

点击

鼠标

dblclick

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

77

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

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/

30

现代正确答案是接受答案和 @ 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')
})
<on id="on">Click me</on>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(298)
禁用“在新的Chrome配置文件中继续”弹出窗口
上一篇
CAP定理-可用性和分区容差
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(64条)