javascript 鼠标单击和双击事件并存的实现方法
发布时间：2014-11-13 编辑：jiaochengji.com
本文介绍下实现javascript鼠标单击与双击事件并存的方法，经常需要为一个链接注册双击事件，或让一个按钮或者其他元素上面同时注册单击或者双击事件。供大家参考。
经常需要为一个链接注册双击事件，或让一个按钮或者其他元素上面同时注册单击或者双击事件，此时网页中的双击事件似乎永远都不会起作用，原因是当点击一次时，就被超链接或者单击事件截获了。
本文为大家介绍一种解决方法，原理是这样的：
单击事件和双击事件都调用同一个方法，根据两次鼠标点击的间隔事件来判断到底是单击还是双击事件。
单击事件来临的时候先不调用，等一小段时间，过了这段时间，如果没有下一次单击来临就开始调用单击对应的操作，如果有下一次点击就调用双击。
代码如下：
复制代码 代码示例:
<HTML>
<HEAD>
<TITLE> javascript 实现单击和双击并存 -www.jiaochengji.com </TITLE>
<META NAME=" Generator" CONTENT=" EditPlus">
<META NAME=" Author" CONTENT=" http://www.jiaochengji.com">
</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">教程集-www.jiaochengji.com</textarea>
</td>
</tr>
<tr>
<td valign=" top" >
<input type=" Reset" >
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
<HEAD>
<TITLE> javascript 实现单击和双击并存 -www.jiaochengji.com </TITLE>
<META NAME=" Generator" CONTENT=" EditPlus">
<META NAME=" Author" CONTENT=" http://www.jiaochengji.com">
</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">教程集-www.jiaochengji.com</textarea>
</td>
</tr>
<tr>
<td valign=" top" >
<input type=" Reset" >
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
介绍了js实现鼠标双击事件与单击事件并存的方法，这里为大家提供一个js区分鼠标单击和双击事件的简单实例，大家不妨参考看看。
代码如下：
复制代码 代码示例:
<input type="button" onclick="aa()" ondblclick="bb()" value="点我">
<script language="javascript">
var isdb;
function aa(){
isdb=false;
window.setTimeout(cc, 500)
function cc(){
if(isdb!=false)return;
alert("这是单击")
}
}
function bb(){
isdb=true;
alert("这是双击")
}
</script>
<script language="javascript">
var isdb;
function aa(){
isdb=false;
window.setTimeout(cc, 500)
function cc(){
if(isdb!=false)return;
alert("这是单击")
}
}
function bb(){
isdb=true;
alert("这是双击")
}
</script>
您可能感兴趣的文章：
JS实现超链接同时绑定鼠标单击与双击事件的代码
js鼠标单击和双击事件冲突问题的解决方法
javascript 鼠标单击和双击事件并存的实现方法
js鼠标单击与双击事件共存
CSS禁止鼠标点击事件例子
jquery事件机制扩展插件 jquery鼠标右键事件
javascript 鼠标按钮button属性
javascript键盘鼠标等事件对照表
js双击鼠标自动滚动屏幕实例
jquery常用技巧及常用方法列表集合
[关闭]