[转载]javascript 实现单击和双击并存 -Mikel

[转载]javascript 实现单击和双击并存

2010年10月6日 分类: 开发笔记, JavaScript

[转载]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>


标签: , , , ,
本文的评论功能被关闭了.
备案信息冀ICP 0007948