点击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>
【问题讨论】：
查看 Vue.js v2 文档（v3 文档here）中的Event Modifiers，v-on:click.stop 将阻止该点击传播或“冒泡”到父元素。
【讨论】：
v-on:click.prevent
.stop 不起作用，而.prevent 起作用。上下文正在单击模态与模态背景。
如 Justin 提供的 link 中所述
你可以在点击事件中.self
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
【讨论】：
这里是如何解决这个问题。
假设你有一个父元素和一些子元素。
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>
问题是：
解决方案是将.stop 修饰符放在图标元素上，这样父事件就不会触发。
【讨论】：
@click.stop，而不仅仅是在链接代码中？
我只想把我的两分钱放在这里，因为我确实发现自己一次又一次地寻找这个问题（有一天我会记得）。
我发现在某些情况下，子元素需要@click.stop.prevent，仅此而已，以阻止它冒泡到父元素。
我假设v-on:click.stop.prevent 会产生相同的效果（非速记）。
【讨论】：
@click 事件时，这也很有效。
此外，如果子元素阻止您点击父元素，您可以通过将 CSS 添加到子元素 pointer-events: none 来解决此问题。
如果子元素中没有事件，则此解决方案有效。
【讨论】：
如果您使用 render/createElement 来生成元素（例如动态），则使用：
event.stopPropagation(); event.preventDefault();
一个渲染函数的例子：
on: { click: function (event) { event.stopPropagation(); event.preventDefault(); yourmethod() } }
【讨论】：
您可以在子组件上使用@click.stop，例如
.modal(@click="myfunc")
default-content(@click.stop)
【讨论】：