Question

我已经设置了这个菜单。然后，我有方法 openMenu ， closeMenu 和 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>

当我调查发生了什么时，我注意到点击并将主菜单鼠标按预期工作。但是，似乎子菜单中的锚点也会对点击事件做出反应。我没有在其他地方设置任何听众。实际上，当我从顶部删除@click时，子菜单会停止注册点击。

所以肯定是爸爸的菜单甚至可以传播给孩子们！太意外了......

然后，我尝试了其他事件。你不知道吗？那些表现完全符合预期。根本没有传播徘徊事件。

这是一个错误吗？如何举报？

（如果它是一个特征，那么它是有史以来最愚蠢的一个。）

我知道这没关系，但我可以打赌我的驴子，像我这样震惊的人会认为这是超级基本的东西，并要求脚本的代码。问题是不那里，但因为我是一个如此灵活的人，所以就是这样。

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

Answer 1

如果元素1和元素2有两个元素。元素2在元素1内部，我们附加一个事件，两个元素让我们说onClick。现在当我们点击元素2时，将执行两个元素的eventHandler。现在问题在于事件将以何种顺序执行。如果附加了元素1的事件执行，则称为事件捕获，如果首先执行附加元素2的事件，则称为事件冒泡。根据W3C，事件将在捕获阶段开始，直到它到达目标回到元素然后它开始冒泡

您可以找到很好的解释here和What is event bubbling and capturing?。关于Child element click event trigger the parent click event已有问题。

在您的情况下，您可以尝试使用vue event modifiers，.stop和.capture，这可能有所帮助，或者您也可以将onclick事件仅放在相关组件上，例如这样：

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

尝试使用.v-on:click.self，正如文档所述

如果event.target是元素本身，即不是来自子元素
，则仅触发处理程序

Vue将@click属性传播给它的所有子节点，这是意外和奇怪的

1 个答案: