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

Question

单击 div 内的按钮时，是否可以阻止 <div> 元素上的功能运行？

点击按钮元素时，函数： toggleSystemDetails 应该不会被触发？这在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>

原文由 hauge 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

查看 Vue.js v3 文档（ 此处 为 v2 文档）中的 事件修饰符， v-on:click.stop 将阻止该点击传播或“冒泡”到父元素。

原文由 Justin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

以下是如何掌握这个问题。

假设您有一个父元素和一些子元素。

1.（第一种情况）您希望父点击不影响子点击。只需在父元素处 .self 修饰符：

   <div class="parent" @click.self="parent"> <!-- .self modifier -->
    <span class="child" @click="child1">Child1</span>
    <span class="child" @click="child2">Child2</span>
    <span class="child" @click="child3">Child3</span>
  </div>

在此处查看实际操作

注意： 如果您在单击子项时删除 .self ，则父事件也会触发。

2.（第二种情况）您有以下代码：

   <div @click="parent">
    Click to activate
    <i class="fa fa-trash" title="delete this" @click="delete_clicked"></i>
  </div>

问题是：

1. 当您单击图标元素时，父单击将触发。 （你不想要这个）
2. 您不能使用第一种解决方案，因为即使单击了文本“单击以激活”，您也想触发父事件。

解决方案是将 .stop 修饰符放在图标元素上，这样父事件就不会触发。

在此处查看实际操作

原文由 Roland 发布，翻译遵循 CC BY-SA 4.0 许可协议