双击事件（dblclick）时,不触发鼠标按下(mousedown) 动作事件

在一个dom节点的事件绑定中，如果同时绑定了dblclick和mousedown那么想要执行双击事件(dblclick)时能就会触发两次mousedown事件。

在说mousedown就不得不说下 click事件

click事件指的是，用户在同一个位置先完成mousedown动作，再完成mouseup动作。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。

dblclick事件则会在mousedown、mouseup、click之后触发。

mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。

在单击的时候（也就是鼠标按下的时候）不会执行双击，但是双击的时候会执行两次单击再执行双击事件。
解决的思路：要想双击时不执行单击事件，就使用定时器清除掉两个单击事件，留下一个双击事件。

解决思路，使用setTimeout

//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是酌情值，大于间隔就行。

第一次单击任务不执行了，是被定时器延时，然后第二次点击的时候给清除了。那么第二次点击事件呢？
在两次单击之后，会立马执行一个双击事件，双击事件的一开头就把这个第二次点击事件给清除了。至此两个单击时间全部被清除了。