首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何区分单击事件和双击事件?

如何区分单击事件和双击事件?
EN

Stack Overflow用户
提问于 2011-03-31 16:24:18
回答 15查看 181.4K关注 0票数 131

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

1.

代码语言:javascript
复制
$("#my_id").click(function() { 
    alert('single click');
});

2.

代码语言:javascript
复制
$("#my_id").dblclick(function() {
    alert('double click');
});

但每次它都会给我single click

EN

回答 15

Stack Overflow用户

回答已采纳

发布于 2011-03-31 16:30:30

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

Here is the trick

代码语言:javascript
复制
// 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);
      }
    });
  });
}

用法:

代码语言:javascript
复制
$("button").single_double_click(function () {
  alert("Try double-clicking me!")
}, function () {
  alert("Double click detected, I'm hiding")
  $(this).hide()
})
代码语言:javascript
复制
<button>Click Me!</button>

编辑:

如下所述,更喜欢使用原生dblclick事件:http://www.quirksmode.org/dom/events/click.html

或者是jQuery提供的:http://api.jquery.com/dblclick/

票数 74
EN

Stack Overflow用户

发布于 2018-12-27 10:17:03

您可以从event对象访问名为detail的本机属性,而不是使用更多的即席状态和setTimeout!

代码语言:javascript
复制
element.onclick = event => {
   if (event.detail === 1) {
     // it was a single click
   } else if (event.detail === 2) {
     // it was a double click
   }
};

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

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

票数 68
EN

Stack Overflow用户

发布于 2013-04-16 17:16:31

一个简单的函数。不需要jquery或其他框架。将您的函数作为参数传递

代码语言:javascript
复制
<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
    <script>
        function doubleclick(el, onsingle, ondouble) {
            if (el.getAttribute("data-dblclick") == null) {
                el.setAttribute("data-dblclick", 1);
                setTimeout(function () {
                    if (el.getAttribute("data-dblclick") == 1) {
                        onsingle();
                    }
                    el.removeAttribute("data-dblclick");
                }, 300);
            } else {
                el.removeAttribute("data-dblclick");
                ondouble();
            }
        }
    </script>
票数 27
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5497073

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档