Vue - Nested Click Event Bubbling Issue

Question

I have a menu button with a click event in Vue. When the button is clicked, it's supposed to activate the menu itself. This is the parent element which when clicked activates the menu (the toggleMenu function makes menuIsActive true). This part works fine:

<div class="navbar-item has-dropdown @click="toggleMenu">
  <div class="navbar-link"></div>
  <app-navmenu :class="{'is-active': menuIsActive}"/>
</div>

And this is the app-navmenu component that gets rendered:

<div class="navbar-dropdown" @click.stop>
  <div class="container is-fluid">
    <div class="column">
      <h1 class="title">Title</h1>
      <router-link class="navbar-item" :to="route" exact>
        <div class="navbar-content">
          <p class="has-text-info">info</p>
          <small>meta info</small>
        </div>
      </router-link>
    </div>
  </div>
</div>

The problem I am running into is that I don't want the menu to disappear when I click on the actual navbar-dropdown div element, hence why I have a @click.stop. However, I do want the menu to disappear when I click on a router-link element, but since I have @click.stop in the navbar-dropdown element, the menu persists. If I don't have a @click.stop event on the navbar-dropdown element, then the menu disappears as soon as the navbar-dropdown element is clicked on, which I don't want.

How can I have the menu persist when clicking on the dropdown body, but also have it disappear when I click on a router-link? I've tried other click methods like .self and .prevent, but those don't seem to do what I need.

I'mexactly not sure, can you explain by listing? on click dropdown, you want menu to appear and on click of router-link you want menu to disappear? — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Mar 15, 2018 at 16:24
The default behavior is that once the menu is activated, if I click on a link OR on the body of the menu, it disappears. I want the menu to persist if I click on the body, but I want it to disappear if I click on a link. — Wes
– Wes, Commented Mar 15, 2018 at 16:25
what happens if you put the .stop on the click event? <div class="navbar-item has-dropdown @click.stop="toggleMenu"> — LShapz
– LShapz, Commented Mar 15, 2018 at 16:26
The default behavior - the menu will disappear if I click on the body OR on a link within the menu. — Wes
– Wes, Commented Mar 15, 2018 at 16:28

Bhojendra Rauniyar · Accepted Answer · 2018-03-15 17:09:19Z

2

I am exactly not sure with your requirement, but following your comment, you can use something like this:

This will even push to the router link:

<router-link class="navbar-item" :to="route" exact 
 @click.native.prevent="callYourMethod">

This will prevent to go to the router link:

<router-link class="navbar-item" :to="route" exact 
 @click.native.prevent="callYourMethod" event="">

answered Mar 15, 2018 at 17:09

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wes Over a year ago

Yep - I just read the docs and forgot all about .native. Thanks for the assist.

Bhojendra Rauniyar Over a year ago

Glad this helped. Please consider accepting the answer.

Wes · Accepted Answer · 2018-03-15 17:07:19Z

0

This is what I ended up doing to fix my issue. First, I moved the click function in the parent to one of its children:

<div class="navbar-item has-dropdown">
  <div class="navbar-link" @click="toggleMenu"></div>
  <app-navmenu :class="{'is-active': menuIsActive}"/>
</div>

This lets the body of the menu stay active even when I click on the body without having to use a @click.stop. Then in the menu itself, I did this so that links will close the menu:

<div class="navbar-dropdown" @click.stop>
  <div class="container is-fluid">
    <div class="column">
      <h1 class="title">Title</h1>
      <div @click="toggleMenu">
        <router-link class="navbar-item" :to="route" exact>
          <div class="navbar-content">
            <p class="has-text-info">info</p>
            <small>meta info</small>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</div>

One strange behavior I noticed is that if I put the @click="toggleMenu" function in the <router-link/> element itself, it doesn't get called on, even if I use .prevent. Hence the need for the div wrapper around the router-link element.

answered Mar 15, 2018 at 17:07

Wes

7741 gold badge12 silver badges29 bronze badges

1 Comment

Wes Over a year ago

I forgot that @click.native is required on the <router-link/> element. So no need for wrapper.

Collectives™ on Stack Overflow

Vue - Nested Click Event Bubbling Issue

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related