Vue 阻止默认路由器-link 行为在 Chrome 中有效，但在 Firefox 中无效
Vue preventing default router-link behaviour works in Chrome but not in Firefox
我有一个以 router-link 作为根标签的组件。我想阻止它的默认 link 行为，因此如果 JS 出现问题或它被禁用，它会回退到 link。
我使用这样的事件修饰符在 Chrome 中实现了它：
@click.native.capture.prevent
但它在 Firefox 中不起作用。
我错过了什么？
UPD：我找到了解决方法，但我仍然很好奇为什么这不起作用
Firefox 似乎以不同于 Chrome 的方式处理元素上的多个事件，这就是为什么您的代码无法按预期工作的原因。我现在不太确定，但可能是 Chrome 从下往上处理所有事件侦听器，而 Firefox 从上往下处理。这导致 Chrome 没有触发第一个事件，因为前一个事件（在本例中是第二个事件）使用阻止默认值，如下图所示（这只是您使用 @click.native.capture.prevent 添加的事件） .
Chrome 事件处理器：
Firefox 事件处理程序：
由于 Vue Router 默认将点击事件添加到 router-link，您可以通过向子组件添加包装器来解决此问题（在这种情况下，事件不会被 router-link 因为包装器阻止了它）
<div>
<router-link to="/shop"> text link</router-link>
</div>
或手动覆盖 event property。
<router-link to="/shop" event=""> text link</router-link>
您可以使用包装器查看它的工作原理 here。
我有一个以 router-link 作为根标签的组件。我想阻止它的默认 link 行为，因此如果 JS 出现问题或它被禁用，它会回退到 link。
我使用这样的事件修饰符在 Chrome 中实现了它：
@click.native.capture.prevent
但它在 Firefox 中不起作用。 我错过了什么？
UPD：我找到了解决方法，但我仍然很好奇为什么这不起作用
Firefox 似乎以不同于 Chrome 的方式处理元素上的多个事件，这就是为什么您的代码无法按预期工作的原因。我现在不太确定，但可能是 Chrome 从下往上处理所有事件侦听器，而 Firefox 从上往下处理。这导致 Chrome 没有触发第一个事件，因为前一个事件（在本例中是第二个事件）使用阻止默认值，如下图所示（这只是您使用 @click.native.capture.prevent 添加的事件） .
Chrome 事件处理器：
Firefox 事件处理程序：
由于 Vue Router 默认将点击事件添加到 router-link，您可以通过向子组件添加包装器来解决此问题（在这种情况下，事件不会被 router-link 因为包装器阻止了它）
<div>
<router-link to="/shop"> text link</router-link>
</div>
或手动覆盖 event property。
<router-link to="/shop" event=""> text link</router-link>
您可以使用包装器查看它的工作原理 here。