How to deal with the conflict between double-click and click events in JS

This time I will show you how to deal with the conflict between double-click and click events in JS, and what are the precautions for dealing with the conflict between double-click and click events in JS. The following is a practical case, let's take a look. take a look.

In the same function block in the JS code, click and double-click events are usually used at the same time, but we usually encounter a problem, that is, a double-click event is executed when double-clicking, and it is also executed Double click event. Such conflicts are often encountered in ZTree and DHTMLX.

If you want to resolve the conflict between the two events, you need to delay the click event. If a click event is detected during this delay, then the two clicks are considered to be a double-click event, then only Execute the double-click event and clear the delay

timer immediately to prevent the second click from taking effect.

The specific code is as follows:

var clickFlag = null;//是否点击标识（定时器编号）
function doOnClick(...) {
  if(clickFlag) {//取消上次延时未执行的方法
    clickFlag = clearTimeout(clickFlag);
  }
  
  clickFlag = setTimeout(function() {
    // click 事件的处理
  }, 300);//延时300毫秒执行
}
function doOnDblClick(...) {
  if(clickFlag) {//取消上次延时未执行的方法
    clickFlag = clearTimeout(clickFlag);
  }
  
  // dblclick 事件的处理
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to write a custom component with vue

How to correctly use hot refresh and webpack Hot loading

The above is the detailed content of How to deal with the conflict between double-click and click events in JS. For more information, please follow other related articles on the PHP Chinese website!