javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2019-11-21 01:28:47
供稿：網友
這里給出一段測試代碼:
<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
