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
})