如何为元素同时绑定单击事件和双击事件

一、问题背景

问题本身很简单，就是Javascript原生的单击事件onclick和双击事件dbclick两者无法共存

二、问题分析

现在的需求是为元素同时绑定单击事件和双击事件，那么我们不妨设想一下，何为双击事件？简单的理解就是在极短的时间间隔内做了两次单击事件。那么我们的现在可以通过这个思路去实现这个效果。

首页，我们需要为元素绑定单击事件的监听。

其次，我们在给定的时间间隔内，累计单击事件触发的次数。

最后，通过这个累计次数来判断是单击还是双击。

三、实践过程

这里我们为了好理解一点，我们先展示核心代码，具体完整实现将以jquery插件的方式，大家可以拿来即用。后面给出下载方式

// 计数
var count = 0;
// 给目标元素绑定点击事件
$(dom).on("click", function () {
  count++;
  if (timer == null) {
    timer = setTimeout(function () {
      if (count > 1) {
        // 双击
        dbClick();
        timer = null;
      } else {
        // 单击
        onClick();
        timer = null;
      }
      count = 0;
    }, 250)
  }
});

// 双击
function dbClick() {}
// 单击
function onClick() {}

jquery插件使用方式

第一步：引入jquery.js，再引入jquery.doClick.js

    $(dom).doClick({
        /**
         * 点击事件回调
         * @param this：自身dom对象 
         */
        onClick: function () {
            // (注意: this获取自身dom对象)
        }
        /**
         * 双击回调事件
         * @param this：自身dom对象 
         */
        dbClick: function () {
            // (注意: this获取自身dom对象)
        }
    })

你可以直接在回调事件里面执行你要的代码，回调事件内的上下文对象this，是你绑定的目标元素本身的dom对象

 

四、问题总结

这个问题本身比较简单，我们通过对现象的分析，实现了一种相对比较稳定的解决方案。当然方案应该还是会有其他的很多方式，大家可以在评论区提出。

 

 

下载地址

CSDN用户：

https://download.csdn.net/download/slw632915651/10875313

GitHub用户：

https://github.com/super-Sun/jquery.doClick    （麻烦顺手给个小星星(*╹▽╹*)）