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>