http://www.jbxue.com/article/8033.html
本文介绍下实现javascript鼠标单击与双击事件并存的方法,经常需要为一个链接注册双击事件,或让一个按钮或者其他元素上面同时注册单击或者双击事件。供大家参考。
经常需要为一个链接注册双击事件,或让一个按钮或者其他元素上面同时注册单击或者双击事件,此时网页中的双击事件似乎永远都不会起作用,原因是当点击一次时,就被超链接或者单击事件截获了。
本文为大家介绍一种解决方法,原理是这样的:
单击事件和双击事件都调用同一个方法,根据两次鼠标点击的间隔事件来判断到底是单击还是双击事件。
单击事件来临的时候先不调用,等一小段时间,过了这段时间,如果没有下一次单击来临就开始调用单击对应的操作,如果有下一次点击就调用双击。
代码如下:
复制代码代码示例:
<HTML>
<HEAD>
<TITLE> javascript 实现单击和双击并存 -www.jbxue.com </TITLE>
<META NAME=" Generator" CONTENT=" EditPlus">
<META NAME=" Author" CONTENT=" http://www.jbxue.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)" οnclick=" handleWisely(event.type)" οndblclick=" 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.jbxue.com</textarea>
</td>
</tr>
<tr>
<td valign=" top" >
<input type=" Reset" >
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
<HEAD>
<TITLE> javascript 实现单击和双击并存 -www.jbxue.com </TITLE>
<META NAME=" Generator" CONTENT=" EditPlus">
<META NAME=" Author" CONTENT=" http://www.jbxue.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)" οnclick=" handleWisely(event.type)" οndblclick=" 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.jbxue.com</textarea>
</td>
</tr>
<tr>
<td valign=" top" >
<input type=" Reset" >
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
介绍了js实现鼠标双击事件与单击事件并存的方法,这里为大家提供一个js区分鼠标单击和双击事件的简单实例,大家不妨参考看看。
代码如下:
复制代码代码示例:
<input type="button" οnclick="aa()" οndblclick="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>