子div点击事件的异常行为 [英] Unexpected behavior on child div click event

问题描述

我为 div 和子级 span 定义了不同的点击事件:

I have defined different click events for a div and a 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 时，都会删除我的部分.但是，它也打开了一个我不想要的模式.

Every time I click the parent div it opens the section I expect. Every time I click the closing span it deletes my section. But, it also opens a modal, which I don't want.

我考虑过尝试在本节之外定义元素，但不确定如何.我也尝试过使用 z-index ，但是我不知道这是否是一个好的解决方案.

I thought about trying to define the element outside the section but I'm not sure how. I've also tried to use z-index, but I don't know if that is a good solution.

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

How can I handle the click behavior so when I click the closing element it doesn't open the modal?

推荐答案

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

Add the .stop modifier to your @click handler to stop the event from propagating:

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

这篇关于子div点击事件的异常行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！