子 div 点击事件的意外行为

Question

我为div 和子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 modifier 添加到您的@click 处理程序以阻止事件传播：

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