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程序设计有所帮助。
相关文章
这篇文章主要介绍了微信小程序与后台PHP交互的方法,结合实例形式分析了微信小程序基于wx.request(OBJECT)方法与后台php程序交互相关操作技巧与注意事项,需要的朋友可以参考下2018-12-12
JavaScript 实现类的多种方法实例，需要的朋友可以参考一下2013-05-05
这篇文章主要介绍了JavaScript链式调用,结合实例形式分析了javascript链式调用的相关原理、实现方法及操作注意事项,需要的朋友可以参考下2018-12-12
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景，而下面这篇文章主要给大家介绍了关于Three.js如何利用性能插件stats实现性能监听的相关资料，需要的朋友可以参考借鉴，下面来一起学习学习吧。2017-09-09
这篇文章主要为大家详细介绍了JavaScript实现更换头像功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要是对jquery检测元素是否存在的实例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
在js中有一个运算符可以帮助我们判断一个值的类型，它就是typeof运算符。下面通过本文给大家分享JavaScript中如何判断一个值的类型，需要的朋友参考下吧2017-09-09
这篇文章主要介绍了v3-admin-vite 整合pont的详细过程,目前后端的Admin模板使用的是v3-admin-vite,需要整合pont接口,方便前后端统一一体化开发,本文给大家介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了javascript异步编程的六种方式总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
本文给大家介绍BootStrap Typeahead自动补全插件的实例代码，非常不错，具有参考借鉴价值，需要的朋友参考下2016-08-08
最新评论