在js中避免单击事件和双击事件的冲突

1.场景：一个对象上需要同时绑定单击和双击事件。

2.冲突：双击事件也可理解成两次较快的单击事件，这就造成当你执行一次双击事件时引发两次单击事件，产生了冲突。

3.解决：设置定时器

当执行双击事件时，单击事件会被首先执行，且执行两次再去执行双击事件；

解决方法如下：

1）首先给单击事件设置定时函数为500ms也就是0.5s，就是在执行完双击时间后执行单击事件，代码如下：

let time;

//单击事件

getClk () {

time = setTimeout(function(){

console.log("这是单击事件");

   },500);

},

//双击事件

getDbClk () {

console.log("这是双击事件");

}

结果：先执行双击事件，再执行两次单击事件；

2）然后我们给双击事件执行时清理下定时器：

getDbClk () {

clearTimeout(time);

console.log("这是双击事件");

}

结果：执行完双击事件后，执行了一次单击事件，这次的单击事件是，双击中第二次点击触发的

3）给单击事件设定清除函数

getClk () {

clearTimeout(time);

time = setTimeout(function(){

console.log("这是单击事件");

   },500);

}

结果：正常显示；

4.总结

      为避免双击事件和单击事件的冲突问题，引入定时器，在执行第一次单击事件时在双击事件中直接清除定时器，第二次在单击事件中设置清除定时器函数，到达清除第二次单击事件的效果；

PS：如果仅在单击事件中执行清除定时函数的方法，执行结果会执行一次单击事件，此单击事件我理解的时第一次的单击执行。