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

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,事件将在捕获阶段开始,直到它到达目标回到元素然后它开始冒泡

你可以在这里找到很好的解释,什么是事件冒泡和捕获？.已经有关于子元素单击事件的问题触发了父单击事件.

在您的情况下,您可以尝试使用vue 事件修饰符,有.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是元素本身,即不是来自子元素,则只触发处理程序