且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

单击div内的按钮时防止单击父级

更新时间:2022-10-21 20:58:05

看看 此处)中的">事件修饰符),v-on:click.stop 将阻止点击传播或冒泡";直到父元素.

Is it possible to prevent the function on the <div> element from running when clicking the button inside the div?

When clicking the button element, the function: toggleSystemDetails should not be triggered? Is this possible in Vue?

<div v-on:click="toggleSystemDetails($event, system.id)" v-for="(system, index) in organization.systems" :key="system.id">
  Outer Div
  <button v-on:click="toggleTileOptionsMode($event, system.id, system.name, system.layout)">
    Inner Button
  </button>
</div>

Have a look at Event Modifiers in the Vue.js v2 docs (v3 docs here), v-on:click.stop will stop that click from propagating or "bubbling" up to the parent element.