双击事件失效解决办法

Posted 2020-09-19 callmeguxi

某些时候，双击事件会失效，模拟办法解决双击失效后，而同时我又不想在该元素上触发两次单击事件，解决办法如下：

var dbclickTime={
  prev:0, next:0//模拟触发双击
};
var clickConflict={//解决单击事件和双击事件的冲突
   _timeout:null,
   set:function (fn) {
      this.clear();
      this._timeout=window.setTimeout(fn,400);
          },
   clear:function () {
             if(this._timeout){
                 window.clearTimeout(this._timeout);
                 this._timeout=0;
      }
          }
};

//code 事件托管

document.addEventListener("click",function (e) {
   if(dbclickTime.prev==0){
       dbclickTime.prev=dbclickTime.next=new Date().getTime();
   }else{
              dbclickTime.prev=dbclickTime.next;
              dbclickTime.next=new Date().getTime()
   }

   if(true){//托管的元素
              clickConflict.set(function () {

　　　　　　　　　　console.log("click");

　　　　　　　　　　//do something
　　　　　　　　});
   }

   if(dbclickTime.next-dbclickTime.prev<300){
              console.log("dblick");
              clickConflict.clear();
              if(true){//托管的元素
                  //do something
              }
   }
      },true);