vue.js - Vue 阻止默认路由器链接行为在 Chrome 中有效，但在 Firefox 中无效

Question

我有一个以 arouter-link作为根标签的组件。我想阻止它的默认链接行为，因此如果 JS 出现问题或它被禁用，它会回退到链接。

我用这样的事件修饰符让它在 Chrome 中工作： @click.native.capture.prevent

但它在 Firefox 中不起作用。我错过了什么？

代码沙盒

UPD：我找到了一种解决方法，但我仍然很好奇为什么这不起作用

Answer 1

似乎 Firefox 对元素上的多个事件的处理方式与 Chrome 不同，这就是您的代码无法按预期工作的原因。在这一点上我不确定，但可能是 Chrome 从下到上处理所有事件侦听器，而 Firefox 从上到下工作。这导致 Chrome 没有触发第一个事件，因为前一个事件（在这种情况下是第二个）使用了 prevent default，如下图所示（这只是您使用 添加的事件@click.native.capture.prevent）。

Chrome 事件处理程序：

火狐事件处理程序：

由于 Vue Router 在默认情况下添加了点击事件，您可以通过向子组件添加包装器来解决此问题（在这种情况下，由于包装器阻止router-link了事件，因此事件不会被捕获）router-link

<div>
  <router-link to="/shop"> text link</router-link>
</div>

或通过手动覆盖事件属性。

<router-link to="/shop" event=""> text link</router-link>

您可以在此处查看使用包装器的工作原理。