解决双击事件和单击事件绑定同一个元素的冲突

  当我们触发双击事件是,会同时触发两次单击事件。
  解决思路:单击事件后延时一定时间执行函数,如果这段时间内触发了双击事件则清除单击事件,如果这段时间结束了还没第二次点击则认为是单击事件,触发函数。

var TimeFn = null;

$('#div1').click(function () {
    // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //执行延时
    TimeFn = setTimeout(function(){
        //do function在此处写单击事件要执行的代码
        console.log('单击');
    },200);
});

$('#div1').dblclick(function () {
     // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //双击事件的执行代码
    console.log('双击');
});

注:
每次单击都会清除上一次延时时间,再创建一个延时事件,所以每次点击都只剩下一个延时事件
如果双击事件出现就会清楚剩下的这个延时事件

你可能感兴趣的:(javascript,jQuery)