javascript实现单击和双击并存的方法

本文实例讲述了javascript实现单击和双击并存的方法。分享给大家供大家参考。具体分析如下:

在我们进行网页开发的过程中经常会遇到这么一个问题,为一个链接注册双击事件,或者让一个按钮或者其他元素上面同时注册单击或者双击事件,这时候我们发现网页中的双击事件似乎永远都不会起作用,原因是当我们点击一次的时候,就被超链接或者单击事件截获了,本文描述了一个如何解决这个技术问题的具体方法。本解决方案的实现原理是,单击事件和双击事件都调用同一个方法,我们根据两次鼠标点击的间隔时间来判断到底是单击还是双击事件。单击事件来临的时候先不调用,等一小段时间,过了这段时间,如果没有下一次单击来临就开始调用单击对应的操作,如果有下一次点击就调用双击。
详细描述请参加下面代码清单:

<HTML> 

  <HEAD> 

  <TITLE> javascript 实现单击和双击并存 </TITLE> 

  <META NAME=" Generator" CONTENT=" EditPlus" > 

  <META NAME=" Author" CONTENT=" /" > 

  <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>

希望本文所述对大家的javascript程序设计有所帮助。