Unexpected behavior on child div click event

Question

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>

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.

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?

Does this answer your question? [Prevent on click on parent when clicking button inside div](https://stackoverflow.com/questions/45700632/prevent-on-click-on-parent-when-clicking-button-inside-div) — leonheess, Sep 18 '20 at 09:57

score 7 · Accepted Answer · edited Jul 15 '22 at 20:39

7

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

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

edited Jul 15 '22 at 20:39

tony19

125,647
18
229
307

answered Aug 14 '17 at 13:28

thanksd

54,176
22
157
150

Unexpected behavior on child div click event

1 Answers1

Linked