Question

我在Vue中有一个带有点击事件的菜单按钮。单击该按钮时，应该激活菜单本身。这是父元素，当单击时激活菜单（toggleMenu函数使menuIsActive为真）。这部分工作正常：

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

这是呈现的app-navmenu组件：

<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>

我遇到的问题是，当我点击实际的navbar-dropdown div元素时，我不希望菜单消失，因此为什么我有@click.stop。但是，我确实希望单击router-link元素时菜单消失，但由于我在@click.stop元素中有navbar-dropdown，因此菜单仍然存在。如果我在@click.stop元素上没有navbar-dropdown个事件，那么只要点击navbar-dropdown元素，菜单就会消失，这是我不想要的。

单击下拉菜单时如何让菜单保持不变，但是当我点击路由器链接时它也会消失？我尝试了其他点击方法，例如.self和.prevent，但这些方法似乎并不能满足我的需求。

Answer 1

我完全不确定您的要求，但是根据您的评论，您可以使用以下内容：

这甚至会推送到路由器链接：

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

这将阻止转到路由器链接：

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

Answer 2

这就是我最终要解决的问题。首先，我将父项中的click函数移动到其子项之一：

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

这样即使我点击身体而不必使用@click.stop，菜单的主体也会保持活动状态。然后在菜单本身，我这样做，以便链接将关闭菜单：

<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>

我注意到的一个奇怪的行为是，如果我将@click="toggleMenu"函数放在<router-link/>元素本身中，即使我使用.prevent，它也不会被调用。因此需要在router-link元素周围使用div包装器。

Vue - 嵌套点击事件冒泡问题

2 个答案: