Javascript onkeydown, onkeyup, onkeypress, onclick, ondblclick

Here is a test code:
<Script type = "text/javascript">
Document. onkeydown = function (){
Document. getElementById ("test"). innerHTML + = "keydown <br/> ";
}
Document. onkeyup = function (){
Document. getElementById ("test"). innerHTML + = "keyup <br/> ";
}
Document. onkeypress = function (){
Document. getElementById ("test"). innerHTML + = "keypress <br/> ";
}
</Script>
<Div id = "test"> </div>
Test results:
Keydown
Keypress
Keyup
The sequence of events is: keydown --> keypress --> keyup
When you hold down a key for a while and then release it, the result is:
Keydown
Keypress
Keydown
Keypress
Keydown
Keypress
Keydown
Keypress
...
Keyup
N keydown and n keypress, and 1 keyup. The time interval set by the system.
Click and dblclick
Some time ago, a friend in the group asked a question about click and dblclick. Here, I also sorted it out. His requirement is that click and dblclick have different event handlers, however, if dblclick is triggered, click is not processed. how can this problem be solved?
Let's take a look at the event occurrence. The test code is as follows:
<Script type = "text/javascript">
Document. onclick = function (){
Document. getElementById ("test"). innerHTML + = "click <br/> ";
}
Document. ondblclick = function (){
Document. getElementById ("test"). innerHTML + = "dblclick <br/> ";
}
</Script>
<Div id = "test"> </div>
The result is as follows:
Click
Dblclick
When the click speed is slowed down, the result is as follows:
Click
Click
Click
It can be seen that dblclick triggers a click event first. If a second click event exists within the double-click delay time range set by the system, it is considered a dblclick event.
So how can we solve the problem raised by this friend? The Code is as follows:
<Script type = "text/javascript">
Function clickTest (){
Document. getElementById ("test"). innerHTML + = "click <br/> ";
}
Function dblclickTest (){
Document. getElementById ("test"). innerHTML + = "dblclick <br/> ";
}
Document. onclick = function (){
This. timeout = window. setTimeout (clickTest, 300 );
}
Document. ondblclick = function (){
If (this. timeout) window. clearTimeout (this. timeout );
DblclickTest ();
}
</Script>
<Div id = "test"> </div>
Double-click the test result as follows:
Dblclick
Dblclick
Dblclick
Dblclick