前端笔记：vue的鼠标事件

之前写了拖拽时候和点击事件冲的解决办法 解决vue @mouseup之后默认触发@click。完了之后自己就开始琢磨为啥其他同行们可以用event.preventDefault来解决问题而我却不能。\

原因分析：

通过鼠标事件中的mousedown、mouseup去和mousemove去实现对用户在鼠标按下、拖拽悬浮窗、鼠标释放这个过程的监听。

<template> 
    <div 
        class="dragBox" 
        ref="dragBox" 
        @mousedown="startDrag" 
        @mousemove="drag" 
        @mouseup="stopDrag" 
        @click="handleMask"
       >
    </div>
</template>

问题就在这里。mousedown、mouseup、click这三个鼠标事件的执行顺序是：
左键点击：mousedown -> mouseup -> click
右键键点击：mousedown -> mouseup

click事件会在mouseup事件之后默认执行，但这并不是属于元素的默认行为。
而event.preventDefault是用来阻止浏览器赋予元素的默认行为，他并不能阻止click事件的执行。