JS脚本:javascript 实现单击和双击并存

admin

2014年2月24日 23:43 本文热度 5591

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

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<!--

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>

事件模式: <textarea rows=" 4" cols=" 60" wrap=" soft" > </textarea>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</BODY>

</HTML>

该文章在 2014/2/24 23:43:53 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。