你的位置:首页 > Java教程

[Java教程]jQuery如何实现在同一个按钮绑定单击和双击事件


jQuery如何实现在同一个按钮绑定单击和双击事件:
单纯的单击事件和双击事件绑定在按钮上是非常简单的操作,又因为双击事件的使用频率要远远低于单击事件,所以两个事件绑定在同一个元素的上几率很小,但是这种情况并非是绝对没有。但是在默认情况下如果同时注册单击和双击事件,如果对按钮进行双击,那么单击事件也会同时出发,下面就通过代码实例介绍一下如何解决此问题。
代码如下:

 

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css">#box{ width:300px; height:200px; margin:0px auto;}#content{ border:5px solid green; height:200px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function () {       var num = 0;       var timeFunName = null;       $("button").bind("click",function(){          clearTimeout(timeFunName);          timeFunName = setTimeout(function(){             num++;             $("#content").html($("#content").html()+"第"+num+"次事件,事件名:单击<br/>");          }, 300); }).bind("dblclick",function(){          clearTimeout(timeFunName);          num++;          $("#content").html($("#content").html()+"第"+num+"次事件,事件名:双击<br/>");       })    })  </script></head><body>  <div id="box"> <div id="content"></div> <button type="button">提交</button></div></body></html>

 

以上代码实现了我们的要求,能够实现单击和双击事件共存的效果,下面介绍一下它的实现原理。
一.实现原理:
代码的具体实现过程这里就不多介绍了,下面就简单介绍一下实现原理。我们想要实现的就是当双击的时候并不触发单击事件,其实这里并不是不触发单击事件,而是不执行指定的操作,这里采用了定时器函数延迟执行的策略,也就是说点击按钮之后,会延迟一段时间再去执行相关操作,如果是双击事件,那么就停止定时器函数的执行,那么自然单击事件中的相关操作也就会得不到执行。
二.相关阅读:
1.bind()可以参阅jQuery的bind()方法一章节。 
2.clearTimeout()函数可以参阅window对象的clearTimeout()方法一章节。 
3.setTimeout()函数可以参阅window对象的setTimeout()方法一章节。 
4.html()函数可以参阅jQuery的html()方法一章节。 
5.dblclick事件可以参阅jQuery的dblclick事件一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12583

更多内容可以参阅:http://www.softwhy.com/jquery/