在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，会继续触发单击，不超过则会执行双击
这也只是在一定程度上避免双击事件时触发单击事件！
网友评论