Vue spreads the @click attribute to all its children, which is unexpected and weird

Question

I've set up this menu. Then, I have the methods openMenu, closeMenu and clickMenu.

<li class="nav-item dropdown" 
  v-on:mouseenter="openMenu" 
  v-on:mouseleave="closeMenu" 
  v-on:click="clickMenu">

  <a href="#demo" class="nav-link dropdown-toggle">DEMO</a>
  <ul class="dropdown-menu">
    <li class="dropdown-item"><a href="#">Demo 1</a></li>
    <li class="dropdown-item"><a href="#">Demo 2</a></li>
  </ul>
</li>

When I investigated what's going on, I noticed that clicking and mousing the main menu works as expected to. However, it seems that the anchors from the submenu also react to a click event. I haven't set any listeners to them in other locations. In fact, when I remove the @click form the top one, the submenus stop registering a click.

So it's definitely that the daddy menu spreads the even listening to the children! So unexpected...

Then, I tried the other events. And wouldn't you know? Those behave exactly as expected. No spreading of the hovering event at all.

Is this a bug? How to report it?

(If it's a feature then it's one of the most stupid ones ever.)

I know it doesn't matter but I can bet my donkey that someone as stunned as me will assume it's something super basic and ask for the code to the scripts. The issue is not there but since I'm such a flexible guy, here it is.

methods: {
  openMenu: (event) => { debugger; },
  closeMenu: (event) => { debugger; },
  clickMenu: (event) => { debugger; }
}

try [Event-Modifiers](https://vuejs.org/v2/guide/events.html#Event-Modifiers), does `:click.stop` helps? — Saurabh, Dec 22 '16 at 03:10
@saurabh The hint was very interesting because it linked to something new to me. However, setting *.stop* on the *click*, didn't do much difference. I believe it's a bug. What do you think? — Konrad Viltersten, Dec 22 '16 at 19:30
@saurabh Just to clarify. The problem isn't that the inner components propagate the click event up to the main menu. In fact, the inner components don't have a click event on them at all (except for the implicit event for anchors). I can't put *.stop* there because then don't have *v-on:click* to begin with... — Konrad Viltersten, Dec 22 '16 at 22:16
I am not sure whether this is a bug or not, doesn't on click event will be applicable on all child elements? Shouldn't you put `v-on:click` event on `` item, like this: `DEMO` if this is needed only on that on not on inside `` — Saurabh, Dec 24 '16 at 05:49
@saurabh I'm starting to believe that you're right. My question should be rather how to make the clicketty click to only be allowed on the top parent but that's doable using markup changes. So you kind of answered my question anyway. Why don't you post it as a reply so I can accept it? — Konrad Viltersten, Dec 24 '16 at 18:54
I have posted the answer, Congos on reaching 10k and merry Christmas :) — Saurabh, Dec 25 '16 at 03:07

score 9 · Accepted Answer · edited Jul 15 '22 at 20:27

If there are two elements element 1 and element 2 . element 2 is inside element 1 and we attach an event with both the elements lets say onClick. Now when we click on element 2 then eventHandler for both the elements will be executed. Now here the question is in which order the event will execute. If the event attached with element 1 executes it is called event capturing and if the event attached with element 2 executes first this is called event bubbling. As per W3C the event will start in the capturing phase untill it reaches the target comes back to the element and then it starts bubbling

You can find nice explanation here and What is event bubbling and capturing?. There are already questions on Child element click event trigger the parent click event.

In your case, you can try using vue event modifiers, there are .stop and .capture, which might help or you can put the onclick event only on relevant component as well, like this:

<li class="nav-item dropdown">
  <a href="#demo" class="nav-link dropdown-toggle"   
     v-on:mouseenter="openMenu" 
     v-on:mouseleave="closeMenu" 
     v-on:click="clickMenu">DEMO</a>
  <ul class="dropdown-menu">
    <li class="dropdown-item"><a href="#">Demo 1</a></li>
    <li class="dropdown-item"><a href="#">Demo 2</a></li>
  </ul>
</li>

Try using .v-on:click.self, as the documentation says

only trigger handler if event.target is the element itself i.e. not from a child element

Vue spreads the @click attribute to all its children, which is unexpected and weird

1 Answers1