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

本文介绍了单击div内的按钮时防止单击父级的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否可以阻止<div>元素上的函数在点击div内的按钮时运行?

点击按钮元素时，函数:toggleSystemDetails 不应该被触发?这在 Vue 中可行吗?


外部门<button v-on:click="toggleTileOptionsMode($event, system.id, system.name, system.layout)">内部按钮

解决方案

看看此处)中的">事件修饰符)，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.

这篇关于单击div内的按钮时防止单击父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！