vue触发事件

Question

想要触发里层的click事件，但是却触发了外层的mousedown
小女子不才求助啊

  <div ref="canvas" id="canvas" @mousedown="canvasDown($event)" @mousemove="canvasMove($event)" @mouseup="canvasUp($event)">
 
         <div v-for="(item,index) in dragLayer" :key="index" :ref="item.id" :class="{'active':item.active}" @click="show"
            class="drag">
            <span class="handle NE"></span>
            <span class="handle NN"></span>
            <span class="handle NW"></span>
            <span class="handle WW"></span>
            <span class="handle EE"></span>
            <span class="handle SW"></span>
            <span class="handle SS"></span>
            <span class="handle SE"></span>
            <span class="layer-tip">双击设置链接</span>
            <span class="layer-close"></span>
          </div>
 </div>

Answer 1

在外层的监听那加个self修饰符就行了,这样只能是由他本身触发，而不是冒泡上来的触发
@mousedown.self="canvasDown($event)"

如有帮助，请采纳，谢谢

Answer 2

阻止鼠标事件冒泡