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/

爱程序网

Tags：[db:关键字]