Filipe Costa Filipe Costa -3 years ago 107
HTML Question

Unexpected behavior on child div click event

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?

Answer Source

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

<span @click.stop="removeSection(index,key)" ...>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download