js jq single click and double click distinction example introduction_basic knowledge

1: Principle:

First look at the execution sequence of click events:

Click (click): mousedown, mouseout, click;
Double click (dblclick) : mousedown, mouseout, click, mousedown, mouseout, click, dblclick;

In the double-click event (dblclick), among the two click events (click) triggered, the first click event (click) will be blocked, but not the second time. That is to say, the double-click event (dblclick) will return the result of a click event (click) and the result of a double-click event (dblclick). Instead of the result of a double-click event (dblclick) and the result of two click events (click).

In this case, just eliminate the extra click event (click) and the problem will be solved.

setTimeout

Two: Code:

Copy code Code As follows:

//Define setTimeout execution method
var TimeFn = null;

$('div').click(function () {
// Cancel Methods that were not executed during the last delay
clearTimeout(TimeFn);
//Execution delay
TimeFn = setTimeout(function(){
//Do function writes the click event here Executed code
},300);
});

$('div').dblclick(functin () {
// Cancel the method that was not executed during the last delay
clearTimeout(TimeFn);
//Execution code of double-click event
})