在html中,同一个元素,同时绑定click,dbclick事件,执行单击事件时,不会触发双击事件,但是执行双击事件时,会触发两次单击事件
下面先给出上面这句话的可运行例子:
代码片段 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/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="http://libs.baidu.com/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,会继续触发单击,不超过则会执行双击
这也只是在一定程度上避免双击事件时触发单击事件!
网友评论