Js jq single click and double click distinguish the sample introduction


I. principle:

Let’s take a look at the sequence of click events:

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

In a double click event (dblclick), the first click is masked, but not the second click. That is, a double-click event (dblclick) returns both a single-click event (click) result and a double-click event (dblclick) result. Instead of a double click event (dblclick) result and a double click event result (click).

In this case, the problem is solved by eliminating the extra one-click event.

setTimeout

Ii. Code:


//Define the setTimeout execution method
var TimeFn = null;

$('div').click(function () {
//Cancels methods that were not executed last delay
clearTimeout(TimeFn);
//Execution time delay
TimeFn = setTimeout(function(){
//The do function here writes the code to execute for the click event
},300);
});

$('div').dblclick(functin () {
//Cancels methods that were not executed last delay
clearTimeout(TimeFn);
//Double-click the execution code for the event
})