快捷導(dǎo)航

javascript實(shí)現(xiàn)單擊和雙擊并存的方法

更新時(shí)間：2014年12月13日 14:56:08 投稿：shichen2014

這篇文章主要介紹了javascript實(shí)現(xiàn)單擊和雙擊并存的方法,可通過定義二次點(diǎn)擊的間隔時(shí)間來達(dá)到判斷單擊與雙擊的效果,是非常實(shí)用的技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)單擊和雙擊并存的方法。分享給大家供大家參考。具體分析如下：

在我們進(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í)間來判斷到底是單擊還是雙擊事件。單擊事件來臨的時(shí)候先不調(diào)用，等一小段時(shí)間，過了這段時(shí)間，如果沒有下一次單擊來臨就開始調(diào)用單擊對(duì)應(yīng)的操作，如果有下一次點(diǎn)擊就調(diào)用雙擊。
詳細(xì)描述請(qǐng)參加下面代碼清單：

復(fù)制代碼代碼如下:

<HTML>
<HEAD>
<TITLE> javascript 實(shí)現(xiàn)單擊和雙擊并存 </TITLE>
<META NAME=" Generator" CONTENT=" EditPlus" >
<META NAME=" Author" CONTENT=" http://www.dbjr.com.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>