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