Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent on click on parent when clicking button inside div

Tags:

vue.js

vuejs2

Is it possible to prevent the function on the <div> element from running when clicking the button inside the div?

When clicking the button element, the function: toggleSystemDetails should not be triggered? Is this possible in Vue?

<div v-on:click="toggleSystemDetails($event, system.id)" v-for="(system, index) in organization.systems" :key="system.id">
  Outer Div
  <button v-on:click="toggleTileOptionsMode($event, system.id, system.name, system.layout)">
    Inner Button
  </button>
</div>
like image 482
hauge Avatar asked Aug 15 '17 20:08

hauge


People also ask

How do you only trigger child click event when a parent is clicked?

click(function(e){alert(e.target.id); so when link is clicked, event. target isn't ul element. You don't need to do this - the click event from the a element will bubble to the ul , unless you use return false; or event.


4 Answers

Have a look at Event Modifiers in the Vue.js v3 docs (v2 docs here), v-on:click.stop will stop that click from propagating or "bubbling" up to the parent element.

like image 109
Justin Avatar answered Oct 18 '22 22:10

Justin


Here is how to master this problem.

Say you have a parent element and some child elements.

1.(1st case) You want the parent click to do not affect the child clicks. Just put at the parent element the .self modifier:

  <div class="parent" @click.self="parent"> <!-- .self modifier -->
    <span class="child" @click="child1">Child1</span>
    <span class="child" @click="child2">Child2</span>
    <span class="child" @click="child3">Child3</span>
  </div>

See it in action here

note: if you remove the .self when you click a child, the parent event will fire too.

2.(2nd case) You have the below code:

  <div @click="parent">
    Click to activate 
    <i class="fa fa-trash" title="delete this" @click="delete_clicked"></i>
  </div>

The problem is:

  1. When you click the icon element the parent click will fire. (you don't want this)
  2. You can NOT use the 1st solution because you want to fire the parent event even if the text "Click to activate" gets clicked.

The solution to this is to put the .stop modifier to the icon element so the parent event will not fire.

See it in action here

like image 36
Roland Avatar answered Oct 18 '22 23:10

Roland


as mentioned on the link provided by Justin you can .self in the click event

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
like image 15
Mawardy Avatar answered Oct 18 '22 22:10

Mawardy


I just want to put my two cents here, since I do find myself looking for this problem again and again (one day I will remember).

I have found in some instances, the child element needs @click.stop.prevent and that's it, to stop it from bubbling to the parent. I assume v-on:click.stop.prevent would have the same effect (non-shorthand).

like image 7
Quin Avatar answered Oct 18 '22 22:10

Quin