div内のボタンをクリックしたときに親をクリックしないようにする

Question

div内のボタンをクリックしたときに<div>要素の機能が実行されないようにすることはできますか？

ボタン要素をクリックすると、機能：toggleSystemDetailsはトリガーされませんか？これはVueで可能ですか？

<div v-on:click="toggleSystemDetails($event, system.id);" class="grid-tile__list-item" v-for="(system, index) in organization.systems" :key="system.id" :class="{'in-viewport fully-in-viewport': system.inview, 'is-xsmall': system.layout === 'xsmall', 'is-small': system.layout === 'small', 'is-medium': system.layout === 'medium', 'is-large': system.layout === 'large'}"> 
     <div class="grid-tile__list-item--overlay"> 
     <button v-on:click="toggleTileOptionsMode($event, system.id, system.name, system.layout)"> 
      Layout Settings 
     </button> 
     </div> 

Answer 1

v-on:click.stopが伝播するか、親要素まで「バブリング」からそのクリックを停止します、Event Modifiersを見てください。