JS腳本:javascript 實現單擊和雙擊并存
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
在我們進行網頁開發的過程中經常會遇到這么一個問題,為一個鏈接注冊雙擊事件,或者讓一個按鈕或者其他元素上面同時注冊單擊或者雙擊事件,這時候我們發現網頁中的雙擊事件似乎永遠都不會起作用,原因是當我們點擊一次的時候,就被超鏈接或者單擊事件截獲了,本文描述了一個如何解決這個技術問題的具體方法。本解決方案的實現原理是,單擊事件和雙擊事件都調用同一個方法,我們根據兩次鼠標點擊的間隔事件來判斷到底是單擊還是雙擊事件。單擊事件來臨的時候先不調用,等一小段時間,過了這段時間,如果沒有下一次單擊來臨就開始調用單擊對應的操作,如果有下一次點擊就調用雙擊。
詳細描述請參加下面代碼清單: <HTML> <HEAD> <TITLE> javascript 實現單擊和雙擊并存 </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" > 點擊一下看看結果: </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 編輯過 |
關鍵字查詢
相關文章
正在查詢... |