jq实现同⼀个元素单击事件和双击事件
转载于：
在html中，同⼀个元素，同时绑定click，dbclick事件，执⾏单击事件时，不会触发双击事件，但是执⾏双击事件时，会触发两次单击事件
下⾯先给出上⾯这句话的可运⾏例⼦：
代码⽚段 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="libs.baidu/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<button class="btn">想我吗？想就点哦！</button>
<script type="text/javascript">
$(function() {
$(".btn").click(function(){
console.log(1);
}).dblclick(function(){
console.log(2);
});
});
</script>
</body>
</html>
上⾯代码在浏览器F12-Console中会看到，单击时，会显⽰1，清空Console，双击时，我们会发现出现两个1和⼀个2！
那么下⾯我们来看下点击事件的执⾏顺序：
单击(click)：mousedown，mouseout，click；
  双击(dblclick)：mousedown，mouseout，click ， mousedown，mouseout，click，dblclick；
在双击事件(dblclick)，触发的两次单击事件(click)中，第⼀次的单击事件(click)会被屏蔽掉（也就是被单击事件替换了），但第⼆次不会（单击双击⼀起触发）。也就是说双击事件(dblclick)会返回⼀次单击事件(click)结果和⼀次双击事件(dblclick) 结果。⽽不是⼀次双击事件(dblclick)结果和两次单击事件结果(click)。
那么，现在知道了单双击事件的原理，⽽我们经过细细推理，得出只要在不触发单击事件的情况下，⼲掉双击事件那⼀次单击事件就可以了！
那么下⾯先给出可运⾏的例⼦：
代码⽚段 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="libs.baidu/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<button class="btn">想我吗？想就点哦！</button>
<script type="text/javascript">
$(function() {
var times=null;
$(".btn").click(function(){
clearTimeout(times);
times=setTimeout(function(){
console.log(1);
},300);
});
$(".btn").dblclick(function(){
clearTimeout(times);
console.log(2);
});
});
</script>
</body>
</html>
那么例⼦在浏览器运⾏F12-Console之后可以看到，单击之后，显⽰1，双击之后，只会显⽰2！
代码中单击事件函数⾥，设置了times运⾏⼀次300ms，双击事件中（前⾯我们说的会触发⼀次单击和⼀次双击），这⾥会屏蔽掉单击事件，时间为300ms，超过了300ms，会继续触发单击，不超过则会执⾏双击
这也只是在⼀定程度上避免双击事件时触发单击事件！jquery在一个元素后追加标签

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。