javascript 鼠标单击和双击事件并存的实现方法

最新推荐文章于 2024-06-28 13:55:12 发布

Quincylk

最新推荐文章于 2024-06-28 13:55:12 发布

阅读量2.6w

点赞数 1

分类专栏： Javascript 文章标签： javascript html5

Javascript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

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" >

</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>