Vue 阻止默认路由器链接行为在 Chrome 中有效,但在 Firefox 中无效

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

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

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

Codesandbox

UPD:我找到了一个解决方法,但我仍然好奇为什么这不起作用

wb214427411 回答:Vue 阻止默认路由器链接行为在 Chrome 中有效,但在 Firefox 中无效

似乎 Firefox 对一个元素上的多个事件的处理方式与 Chrome 不同,这就是您的代码无法按预期工作的原因。我现在还不确定,但可能是 Chrome 自下而上处理所有事件侦听器,而 Firefox 自上而下工作。这会导致 Chrome 没有触发第一个事件,因为前一个事件(在本例中为第二个事件)使用阻止默认值,如下图所示(这只是您使用 @click.native.capture.prevent 添加的事件)。

Chrome 事件处理程序:

Chrome event handler

Firefox 事件处理程序:

Firefox event handler

由于 Vue Router 默认将点击事件添加到 router-link,您可以通过向您的子组件添加包装器来解决此问题(在这种情况下,{{1} } 因为包装器阻止了它)

router-link

或手动覆盖 event property

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

您可以使用包装器 here 了解它的工作原理。

本文链接:https://www.f2er.com/16594.html

大家都在问