事件绑定中，执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素（如button等），如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时，不会触发双击事件(dblclick)， 执行双击事件(dblclick)时却会触发两次单击事件(click)。
先看一下点击事件的执行顺序：
单击(click)：mousedown，mouseout，click；
双击(dblclick)：mousedown，mouseout，click ， mousedown，mouseout，click，dblclick；
在单击的时候不会执行双击，但是双击的时候会执行两次单击再执行双击事件。
解决的思路：使用定时器清除掉两个单击事件，留下一个双击事件。
setTimeout
<button onclick="single(event)" ondblclick="double(event)">按钮</button>var time = 200;var timeOut = null;function single (e) {clearTimeout(timeOut); // 清除第一个单击事件timeOut= setTimeout(function () {console.log('单击');// 单击事件的代码执行区域// ...}, time)}function double (e) {clearTimeout(timeOut); // 清除第二个单击事件console.log('双击')// 双击的代码执行区域// ...}
然后现在，单击按钮打印“单击”，双击按钮打印“双击”。
关于 time=200，大家知道js的事件循环机制，点击事件会添加一个任务队列。time=0， 也会添加一个任务队列。那么time=0与time=200有什么区别呢？
因为第一次单击事件后，主线程没有任何任务，就会立马执行这个单击事件的任务。待第二次单击的时候，假设距离第一次单击事件是150ms, 如果你的定时器小于150ms, 那么第一次的任务队列就会执行完。
要想不执行第一次的任务队列，那么定时器时间间隔就必须大于两次单击的时间间隔了。所以，这个200是酌情值，大于间隔就行。
第一次单击任务不执行了，是被定时器延时，然后第二次点击的时候给清除了。那么第二次点击事件呢？
在两次单击之后，会立马执行一个双击事件，双击事件的一开头就把这个第二次点击事件给清除了。
这就是双击事件的大概过程。
如果觉得《双击事件（dblclick）时 不触发单击事件(click)》对你有帮助，请点赞、收藏，并留下你的观点哦！
