防止在單擊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

看一看Event Modifiers，v-on:click.stop將停止從點擊傳播或「沸騰」起來的父元素。