javascript实现单击和双击并存的方法
本文实例讲述了javascript实现单击和双击并存的方法。分享给大家供大家参考。具体分析如下：
在我们进行网页开发的过程中经常会遇到这么一个问题，为一个链接注册双击事件，或者让一个按钮或者其他元素上面同时注册单击或者双击事件，这时候我们发现网页中的双击事件似乎永远都不会起作用，原因是当我们点击一次的时候，就被超链接或者单击事件截获了，本文描述了一个如何解决这个技术问题的具体方法。本解决方案的实现原理是，单击事件和双击事件都调用同一个方法，我们根据两次鼠标点击的间隔时间来判断到底是单击还是双击事件。单击事件来临的时候先不调用，等一小段时间，过了这段时间，如果没有下一次单击来临就开始调用单击对应的操作，如果有下一次点击就调用双击。
详细描述请参加下面代码清单：
<HTML> <HEAD> <TITLE>javascript实现单击和双击并存</TITLE> <METANAME="Generator"CONTENT="EditPlus"> <METANAME="Author"CONTENT="https://www.nhooo.com/"> <METANAME="Keywords"CONTENT=""> <METANAME="Description"CONTENT=""> </HEAD>
<BODY> <SCRIPTLANGUAGE="JavaScript"> <!-- vardcTime=250; //doubleclicktime vardcDelay=100; //noclicksafterdoubleclick vardcAt=0; //timeofdoubleclick varsavEvent=null;//saveEventforhandlingdoClick(). varsavEvtTime=0; //savetimeofclickevent. varsavTO=null; //handleofclicksetTimeOut functionshowMe(txt){ document.forms[0].elements[0].value+=txt; } functionhandleWisely(which){ switch(which){ case"click": savEvent=which; d=newDate(); savEvtTime=d.getTime(); savTO=setTimeout("doClick(savEvent)",dcTime); break; case"dblclick": doDoubleClick(which); break; default: } } functiondoClick(which){ if(savEvtTime-dcAt<=0){ returnfalse; } showMe("单击"); } functiondoDoubleClick(which){ vard=newDate(); dcAt=d.getTime(); if(savTO!=null){ savTO=null; } showMe("双击"); }
//--> </SCRIPT>
<p> <ahref="javascript:void(0)" onclick="handleWisely(event.type)" ondblclick="handleWisely(event.type)" style="color:blue;font-family:arial;cursor:hand"> 点击一下看看结果： </a> </p> <form> <table> <tr> <tdvalign="top"> 事件模式:<textarearows="4"cols="60"wrap="soft"></textarea> </td> </tr> <tr> <tdvalign="top"> <inputtype="Reset"> </td> </tr> </table> </form> </BODY> </HTML>