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

【问题标题】：Vue - Nested Click Event Bubbling IssueVue - 嵌套点击事件冒泡问题
【发布时间】：2018-08-24 13:05:09
【问题描述】：

我在 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 元素时，我确实希望菜单消失，但由于navbar-dropdown 元素中有@click.stop，因此菜单仍然存在。如果我在navbar-dropdown 元素上没有@click.stop 事件，那么只要单击navbar-dropdown 元素，菜单就会消失，这是我不想要的。

如何在单击下拉正文时使菜单保持不变，但在单击路由器链接时又使其消失？我尝试过其他点击方法，如 .self 和 .prevent，但这些方法似乎无法满足我的需求。

【问题讨论】：

我不太确定，你能通过列出来解释吗？单击下拉菜单时，您希望出现菜单，单击路由器链接时您希望菜单消失？
默认行为是，一旦菜单被激活，如果我点击一个链接或菜单正文，它就会消失。如果单击正文，我希望菜单保持不变，但如果单击链接，我希望它消失。
如果将 .stop 放在点击事件上会发生什么？
默认行为 - 如果我单击正文或菜单中的链接，菜单将消失。
抱歉，还没说到重点……你能想象一下吗？

标签： vue.js click vuejs2

【解决方案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="">

【讨论】：

是的 - 我刚刚阅读了文档并忘记了所有关于 .native 的信息。感谢您的帮助。
很高兴这有帮助。请考虑接受答案。

【解决方案2】：

这就是我最终解决问题的方法。首先，我将父项中的点击功能移至其子项之一：

<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 包装器。

【讨论】：

我忘了@click.native 是<router-link/> 元素所必需的。所以不需要包装器。