onkeydown,onkeyup,onkeypress,onclick,ondblclick

 

onkeydown,onkeyup,onkeypress,onclick,ondblclick

昨天羣裏面的朋友問了個比較有意思的問題,keydown,keyup,keypress事件的先後順序。

這裏給出一段測試代碼:

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

測試結果爲:

keydown
keypress
keyup

顯而易見,事件發生的順序是: keydown --> keypress --> keyup

當按住一個鍵一段時間後再放開時,結果爲:

keydown
keypress
keydown
keypress
keydown
keypress
keydown
keypress

...
keyup

n個keydown和n個keypress,1個keyup,系統設置的時間間隔.

關於click和dblclick

前段時間羣裏面的一個朋友問過一個關於click和dblclick的問題,在這裏同時也整理一下,他的要求是click和dblclick有不同的事件處理程序,但是如果觸發了dblclick則對click不做處理.如何解決?

我們先來看一下事件的發生情況，測試代碼如下:

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

雙擊時結果如下:

click
dblclick

當放慢點擊速度時,結果如下:

click
click
click

可見,dblclick時,首先會觸發一個click事件,然後如果在系統設置的雙擊延遲時間範圍內有第二次click事件,則被認爲是dblclick事件.

那麼如何解決這位朋友提出的問題呢?給出代碼如下:

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

雙擊測試結果如下:

dblclick
dblclick
dblclick
dblclick