elementui双击事件-如何将单击和双击风暴同时绑定到元素上

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

一、问题背景

问题本身很简单，就是Javascript原生的onclick和双击dbclick很难共存

2.问题分析

目前的需求是给元素同时绑定单击和双击事件，那么我们不妨想象一下，什么是双击事件？ 简单理解就是在很短的时间间隔内制造两次点击风暴。 那么我们通过这样的思维方式就可以达到这个疗效。

对于首页，我们需要为元素绑定tap来点击暴风雨。

其次elementui双击事件，在给定的时间间隔内，我们累计暴风雨触发的点击次数。

最后根据累计次数判断是单击还是双击。

3. 练习过程

这里，为了更好理解，我们先展示核心代码，具体完整的实现将以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对象)
        }
    })

你可以直接在反弹storm上执行你想要的代码，回调storm中的上下文对象this就是你绑定的目标元素的dom对象。

4.问题总结

问题本身比较简单。 通过对现象的分析，我们得到了一个相对稳定的解决方案。 当然elementui双击事件，其他形式的方案应该还有很多，大家可以在评论区提出。

下载链接

CSDN用户：

GitHub 用户：

（请给我一个小星星(*▽*)）