這里給出一段測試代碼:
<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>
測試結(jié)果為:
keydown
keypress
keyup
顯而易見,事件發(fā)生的順序是: keydown --> keypress --> keyup
當(dāng)按住一個鍵一段時間后再放開時,結(jié)果為:
keydown
keypress
keydown
keypress
keydown
keypress
keydown
keypress
...
keyup
n個keydown和n個keypress,1個keyup,系統(tǒng)設(shè)置的時間間隔.
關(guān)于click和dblclick
前段時間群里面的一個朋友問過一個關(guān)于click和dblclick的問題,在這里同時也整理一下,他的要求是click和dblclick有不同的事件處理程序,但是如果觸發(fā)了dblclick則對click不做處理.如何解決?
我們先來看一下事件的發(fā)生情況，測試代碼如下:
<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>
雙擊時結(jié)果如下:
click
dblclick
當(dāng)放慢點擊速度時,結(jié)果如下:
click
click
click
可見,dblclick時,首先會觸發(fā)一個click事件,然后如果在系統(tǒng)設(shè)置的雙擊延遲時間范圍內(nèi)有第二次click事件,則被認(rèn)為是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>
雙擊測試結(jié)果如下:
dblclick
dblclick
dblclick
dblclick

最新評論