JS腳本:javascript 實(shí)現(xiàn)單擊和雙擊并存
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
在我們進(jìn)行網(wǎng)頁開發(fā)的過程中經(jīng)常會(huì)遇到這么一個(gè)問題，為一個(gè)鏈接注冊(cè)雙擊事件，或者讓一個(gè)按鈕或者其他元素上面同時(shí)注冊(cè)單擊或者雙擊事件，這時(shí)候我們發(fā)現(xiàn)網(wǎng)頁中的雙擊事件似乎永遠(yuǎn)都不會(huì)起作用，原因是當(dāng)我們點(diǎn)擊一次的時(shí)候，就被超鏈接或者單擊事件截獲了，本文描述了一個(gè)如何解決這個(gè)技術(shù)問題的具體方法。本解決方案的實(shí)現(xiàn)原理是，單擊事件和雙擊事件都調(diào)用同一個(gè)方法，我們根據(jù)兩次鼠標(biāo)點(diǎn)擊的間隔事件來判斷到底是單擊還是雙擊事件。單擊事件來臨的時(shí)候先不調(diào)用，等一小段時(shí)間，過了這段時(shí)間，如果沒有下一次單擊來臨就開始調(diào)用單擊對(duì)應(yīng)的操作，如果有下一次點(diǎn)擊就調(diào)用雙擊。
詳細(xì)描述請(qǐng)參加下面代碼清單： <HTML> <HEAD> <TITLE> javascript 實(shí)現(xiàn)單擊和雙擊并存 </TITLE> <META NAME=" Generator" CONTENT=" EditPlus" > <META NAME=" Author" CONTENT=" http://www.javabiz.cn" > <META NAME=" Keywords" CONTENT=" " > <META NAME=" Description" CONTENT=" " > </HEAD> <BODY> <SCRIPT LANGUAGE=" JavaScript" > <!-- var dcTime=250; // doubleclick time var dcDelay=100; // no clicks after doubleclick var dcAt=0; // time of doubleclick var savEvent=null; // save Event for handling doClick(). var savEvtTime=0; // save time of click event. var savTO=null; // handle of click setTimeOut function showMe(txt) { document.forms[0].elements[0].value += txt; } function handleWisely(which) { switch (which) { case " click" : savEvent = which; d = new Date(); savEvtTime = d.getTime(); savTO = setTimeout(" doClick(savEvent)" , dcTime); break; case " dblclick" : doDoubleClick(which); break; default: } } function doClick(which) { if (savEvtTime - dcAt <= 0) { return false; } showMe(" 單擊" ); } function doDoubleClick(which) { var d = new Date(); dcAt = d.getTime(); if (savTO != null) { savTO = null; } showMe(" 雙擊" ); } //--> </SCRIPT> <p> <a href=" javascript:void(0)" onclick=" handleWisely(event.type)" ondblclick=" handleWisely(event.type)" style=" color: blue; font-family: arial; cursor: hand" > 點(diǎn)擊一下看看結(jié)果： </a> </p> <form> <table> <tr> <td valign=" top" > 事件模式: <textarea rows=" 4" cols=" 60" wrap=" soft" > </textarea> </td> </tr> <tr> <td valign=" top" > <input type=" Reset" > </td> </tr> </table> </form> </BODY> </HTML> 該文章在 2014/2/24 23:43:53 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
