西西軟件園多重安全檢測下載網(wǎng)站、值得信賴的軟件下載站!
軟件
軟件
文章
搜索

首頁編程開發(fā)javascript|JQuery → javascript 實現(xiàn)單擊和雙擊并存的解決辦法代碼實例

javascript 實現(xiàn)單擊和雙擊并存的解決辦法代碼實例

相關(guān)軟件相關(guān)文章發(fā)表評論 來源:本站整理時間:2010/10/2 22:36:37字體大。A-A+

作者:佚名點擊:326次評論:0次標簽: javascript

  • 類型:電子教程大。3.3M語言:中文 評分:3.6
  • 標簽:
立即下載
在我們進行網(wǎng)頁開發(fā)的過程中經(jīng)常會遇到這么一個問題,為一個鏈接注冊雙擊事件,或者讓一個按鈕或者其他元素上面同時注冊單擊或者雙擊事件,這時候我們發(fā)現(xiàn)網(wǎng)頁中的雙擊事件似乎永遠都不會起作用,原因是當我們點擊一次的時候,就被超鏈接或者單擊事件截獲了,本文描述了一個如何解決這個技術(shù)問題的具體方法。本解決方案的實現(xiàn)原理是,單擊事件和雙擊事件都調(diào)用同一個方法,我們根據(jù)兩次鼠標點擊的間隔事件來判斷到底是單擊還是雙擊事件。單擊事件來臨的時候先不調(diào)用,等一小段時間,過了這段時間,如果沒有下一次單擊來臨就開始調(diào)用單擊對應(yīng)的操作,如果有下一次點擊就調(diào)用雙擊。
詳細描述請參加下面代碼清單:
< HTML>
< HEAD>
< TITLE> javascript 實現(xiàn)單擊和雙擊并存 < /TITLE>
< META NAME=" Generator" CONTENT=" EditPlus" >
< 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" >
點擊一下看看結(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>

    相關(guān)評論

    閱讀本文后您有什么感想? 已有人給出評價!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過難過
    • 5 囧
    • 3 圍觀圍觀
    • 2 無聊無聊

    熱門評論

    最新評論

    發(fā)表評論 查看所有評論(0)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字數(shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)