javascript实现单击和双击并存的方法
本文实例讲述了javascript实现单击和双击并存的方法。分享给大家供大家参考。具体分析如下：
在我们进行网页开发的过程中经常会遇到这么一个问题，为一个链接注册双击事件，或者让一个按钮或者其他元素上面同时注册单击或者双击事件，这时候我们发现网页中的双击事件似乎永远都不会起作用，原因是当我们点击一次的时候，就被超链接或者单击事件截获了，本文描述了一个如何解决这个技术问题的具体方法。本解决方案的实现原理是，单击事件和双击事件都调用同一个方法，我们根据两次鼠标点击的间隔时间来判断到底是单击还是双击事件。单击事件来临的时候先不调用，等一小段时间，过了这段时间，如果没有下一次单击来临就开始调用单击对应的操作，如果有下一次点击就调用双击。
详细描述请参加下面代码清单：
<HEAD>
<TITLE> javascript 实现单击和双击并存 </TITLE>
<META NAME=" Generator" CONTENT=" EditPlus" >
<META NAME=" Author" CONTENT=" https://www.jb51.net/" >
<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程序设计有所帮助。
相关文章
ionic cordova一次上传多张图片（类似input file提交表单)的实现方法
这篇文章主要介绍了ionic cordova一次上传多张图片（类似input file提交表单)的实现方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
这篇文章主要介绍了JavaScript实现消消乐-源代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
在Web开发中,保护用户数据是至关重要的,而对数据进行加密是其中一种有效手段,本文将深入浅出地介绍常见的加解密算法,包括消息摘要算法、对称加密算法以及非对称加密算法,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了JavaScript中的数组合并方法和对象合并方法,通过代码的形式给大家介绍的非常详细，需要的朋友可以参考下2018-05-05
本文主要是记录,el-input怎么限制输入只允许输入浮点型,注意是输入的时候限制只允许输入浮点型,而不是输入完提交的时候再校验提示,感兴趣的朋友跟随小编一起看看吧2024-03-03
本文主要介绍IE和火狐在添加删除事件上的区别，并给出通用的解决方法，需要的朋友可以参考下。2016-05-05
在开发过程中,特别是涉及到金额计算或需要精确比较的场景,浮点数精度问题是一个常见而重要的挑战,本文将介绍在JavaScript中如何识别、理解和解决这些问题,并提供一些实用的技巧和建议,需要的朋友可以参考下2024-06-06
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
这篇文章主要介绍了bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法,涉及js数据传输及定义响应事件相关操作技巧,需要的朋友可以参考下2017-05-05
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
一般Web界面包括的界面控件有：单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息、列表控件等，这些界面控件的操作都有哪些不同，下面逐一介绍2015-12-12
微信小程序开发中Promise的使用(aysnc,await)及场景分析
在微信小程序开发中,错误使用Promise可能导致无法正确获取数据,本文分析了一个常见错误场景,即在异步函数中未使用await或.then()处理Promise,导致无法获取异步操作的返回结果,文章提供了使用await和链式调用.then()的解决方法,帮助开发者避免类似错误,确保数据正确返回2024-10-10
最新评论