JS脚本: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> 该文章在 2014/2/24 23:43:53 编辑过 |
关键字查询
相关文章
正在查询... |