Vue.js 防止在单击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>

布局设置

查看Vue.js v2文档（v3文档），

v-on:click.stop

将停止该单击传播或“冒泡”到父元素。

如Justin提供的 您可以在单击事件中

.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>

问题是：

单击图标元素时，将触发父级单击。（你不想要这个）

您不能使用第一个解决方案，因为即使单击了文本“Click to activate”（单击以激活），您也要触发父事件

解决方法是将

.stop

修饰符添加到icon元素，这样父事件就不会触发

---

我只想把我的两分钱放在这里，因为我发现自己在一次又一次地寻找这个问题（总有一天我会记得）

我发现在某些情况下，子元素需要单击.stop.prevent，以阻止它冒泡到父元素。

---

我假设

v-on:click.stop.prevent将具有相同的效果（非速记）。
此外，如果子元素阻止您单击父元素，您可以通过将CSS添加到子元素
指针事件：none
来解决此问题。
如果子元素中没有事件，则此解决方案有效。
可能重复此选项，请认为它现在实际上是
v-on:click。阻止
@PJATX这是另一个事件修饰符（已在VueJS指南I链接中介绍）。例如，如果要阻止浏览器执行其默认操作，则表单提交非常有用。在这个特定的实例中，“停止”修改器更好，因为问题是关于停止单击从链向上传播到父div。啊，明白了。我看到另一篇文章给人的印象是上面的新语法。我在试图阻止对子元素的单击到达父元素时发现了这一点，
.stop
不起作用，而
.prevent
起作用。上下文正在单击模态与模态背景。我尝试添加。停止，但它仍将在下一个事件激发时立即解决…@PJATX您可能指的是Vue 3吗？“.stop”在Vue2中仍然有效，只是测试了它。
  <div @click="parent">
    Click to activate 
    <i class="fa fa-trash" title="delete this" @click="delete_clicked"></i>
  </div>