如何区分单击事件和双击事件 (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);
      }
    });
  });
}

用法:

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

编辑:

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

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

30

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

const button = document.getElementById('button')
let timer
button.addEventListener('click', event => {
  if (event.detail === 1) {
    timer = setTimeout(() => {
      console.log('click')
    }, 200)
  }
})
button.addEventListener('dblclick', event => {
  clearTimeout(timer)
  console.log('dblclick')
})
<button id="button">Click me</button>

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

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

相关推荐

  • type c接口是啥改变你的充电体验

    示例示例Type C接口是一种新型的USB连接器,它可以支持更高的数据传输速度,比传统的USB 0接口更快。与传统的USB接口不同,Type C接口可以在两端都使用,无需额外的翻转,使连接更加方便快捷。下面是一个使用Type C接口的代码示例:…

    2023-01-12 02:06:09
    0 79 19
  • carwings是什么意思智能汽车连接系统的未来

    Carwings是日产汽车公司推出的一款远程智能汽车服务,它可以帮助用户远程监控汽车的状态和行驶信息,并且可以远程控制汽车的功能。…

    2023-01-19 13:55:38
    0 99 21
  • cvt变速箱油分几种:CVT变速箱油的种类及用法

    cvt变速箱油一般分为三种,分别是:传统cvt变速箱油:代码:CVT-1…

    2023-01-27 12:23:25
    0 58 84
  • contextcapture集群:如何使用ContextCapture技术构建高效的3D集群

    ContextCapture集群是一种分布式的技术,它可以让多台服务器共享数据,从而提高应用程序的性能和可靠性。它可以使用多台服务器来收集、存储和处理数据,而不需要单独的服务器来执行这些任务。…

    2023-01-05 08:03:52
    0 28 67
  • code128条码字体下载:使用 Code128 条码字体创建条码标识

    code128条码字体下载是指下载code128条码字体的过程。Code128条码字体是一种用于生成Code128条形码的字体。它可以将文本转换为条形码,并将条形码打印在各种类型的媒体上。要下载code128条码字体,可以从网上搜索“code128条码字体下载”,然后选择一个可靠的网站下载。一旦下载完成,就可以使用该字体创建code128条形码。…

    2023-01-19 14:44:33
    0 41 80
  • txvlog com糖心改变你的生活,让你的心情更加甜蜜!

    txvlog com糖心是一款以视频分享为主的社交APP,可以让用户上传自己的视频,并与其他用户进行互动。它的主要功能有:用户注册:用户可以通过手机号码、邮箱地址或者社交媒体账号注册,并设置自己的个人信息;…

    2023-01-10 05:08:15
    0 41 87
  • chigo空调遥控器操作老式:如何使用Chigo空调遥控器操作老式空调

    Chigo空调遥控器操作老式,主要有以下几步:首先准备好Chigo空调遥控器,打开电源,将遥控器与空调连接;…

    2023-01-23 01:53:07
    0 48 95
  • cvte在线测评:如何利用CVTE在线测评提升职业能力?

    cvte在线测评是一款在线编程测评系统,它可以帮助用户快速、准确地评估学生的编程能力。它支持多种编程语言,并且提供了完善的测试环境,可以有效地检测出学生编程中的错误,同时还可以提供可视化的报告,帮助用户更好地理解学生的编程能力。…

    2023-01-27 15:11:58
    0 54 21

发表评论

登录 后才能评论

评论列表(63条)