解决click 和dbclick 事件冲突的办法

      作为一个前端码农，你可能和我一样遇到过这样的问题：给一个DOM元素同时绑定click和dbclick事件,结果发现在双击时触发了两次单击事件。如下，我有一个

的元素，绑定事件后效果如下：

为解决这个问题还是得先了解一下两种事件的机制：

 1、单击(click)：mousedown、mouseup、click

2、双击(dbclick)：mousedown、mouseup、click、mousedown、mouseup、click

由此，我们可以知道一个双击事件是由两个单击事件组成。因而我们可以利用时间延迟，在触发单击事件后的一段时间内，禁止再次触发。以下是具体代码：

var timer =null;

$('.test').on('click',function() {

clearTimeout(timer)

timer =setTimeout(function() {

console.log('click')

},300);

});

$('.test').dblclick(function() {

console.log('dbclick')

});

效果图：