单击div中的按钮时防止单击父项

如Justin提供的链接中所述， 您可以在click事件中.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>

看一下事件修饰符，v-on:click.stop将阻止该点击传播或“冒泡”至父元素。

这是解决此问题的方法。

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

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修饰符放在icon元素上，以使父事件不会触发。

看到它在这里行动