Vue trigger event

tried to trigger the click event in the inner layer, but triggered the mousedown in the outer layer
the little girl asked for help

  <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>
Aug.24,2021

prevent mouse events from bubbling


just add a self modifier to the outer monitor, so it can only be triggered by himself, not bubbly
@ mousedown.self= "canvasDown ($event)"

.

if it is helpful, please accept it. Thank you

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eada79-2171.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eada79-2171.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?