子 div 单击事件的意外行为

Question

我为 adiv和 child定义了不同的点击事件span：

<div 
  @click.prevent="changeView(value.key)" 
  v-if="value.key != 'Document'" 
  class="panel panel-primary" 
  v-for="(value, key, index) in myList"
>
  <div class="panel-body quote">
    <span 
      @click="removeSection(index,key)" 
      class="pull-right glyphicon glyphicon-remove text-info above"
    ></span>
    <p>{{value.key}}</p>
  </div>
</div>

每次我单击父级时，div它都会打开我期望的部分。每次我点击关闭span它都会删除我的部分。但是，它也会打开一个我不想要的模式。

我想尝试在该部分之外定义元素，但我不确定如何定义。我也尝试使用z-index，但我不知道这是否是一个好的解决方案。

我如何处理点击行为，以便当我点击关闭元素时它不会打开模态？

Answer 1

将.stop修饰符添加到您的@click处理程序以阻止事件传播：

<span @click.stop="removeSection(index,key)" ...>