在一个dom节点的事件绑定中，如果同时绑定了dblclick和mousedown那么想要执行双击事件(dblclick)时能就会触发两次mousedown事件。
在说mousedown就不得不说下 click事件
click事件指的是，用户在同一个位置先完成mousedown动作，再完成mouseup动作。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。
dblclick事件则会在mousedown、mouseup、click之后触发。
mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。
在单击的时候（也就是鼠标按下的时候）不会执行双击，但是双击的时候会执行两次单击再执行双击事件。 解决的思路：要想双击时不执行单击事件，就使用定时器清除掉两个单击事件，留下一个双击事件。
解决思路，使用setTimeout
代码语言：javascript复制//data定义变量
data(){
return{
timeOut: null
}
}
<li :style="{ width: `${120 * item.duration}px` }"
@dblclick.stop="handleDblclick($event, item)"
@mousedown.self="handleMousedown($event, node, index)">
{{ item.name }}
<sup v-if="delVisible" @click="handleDeleteUser(data, node.level, index, item)"></sup>
</li>
handleMousedown(event, node, index) {
clearTimeout(this.timeOut); // 清除第一个鼠标单击按下事件
this.timeOut = setTimeout(() => {
console.log(event.target, 'handleMousedown dom');
console.log('handleMousedown', event.offsetX, event.clientX);
}, 200)
},
handleDblclick(event, item) {
clearTimeout(this.timeOut)
console.log(event.target, 'handleDblclick');
},关于实现原理 在setTimeout 中的 time=200，大家知道js的事件循环机制，点击事件会添加一个任务队列。time=0， 也会添加一个任务队列。那么time=0与time=200有什么区别呢？
因为第一次单击事件后，主线程没有任何任务，就会立马执行这个单击事件的任务。待第二次单击的时候，假设距离第一次单击事件是150ms, 如果你的定时器小于150ms, 那么第一次的任务队列就会执行完。 要想不执行第一次的任务队列，那么定时器时间间隔就必须大于两次单击的时间间隔了。这样才能清除第一次的单击事件，所以，这个200是酌情值，大于间隔就行。
第一次单击任务不执行了，是被定时器延时，然后第二次点击的时候给清除了。那么第二次点击事件呢？ 在两次单击之后，会立马执行一个双击事件，双击事件的一开头就把这个第二次点击事件给清除了。至此两个单击时间全部被清除了。
