1

I have a component that has a router-link as a root tag. I want to prevent its default link behavior so it would fall back to the link if something is wrong with JS or it's disabled.

I made it work in Chrome with such event modifiers: @click.native.capture.prevent

But it doesn't work in Firefox. What am I missing?

Codesandbox

UPD: I found a workaround, but I'm still curios why this isn't working

Dvdgld
  • 1,984
  • 2
  • 15
  • 41
  • Ideally this should work as expected. Do you have a minimal testable version to reproduce that issue? – Aer0 Aug 01 '21 at 14:15
  • right, I forgot about that. But the funny thing, I've just created it, and it appeared to be working. So there is something else I'm missing:( – Dvdgld Aug 02 '21 at 08:52
  • I'll figure it out right now and update the question – Dvdgld Aug 02 '21 at 08:53
  • I've updated the issue it has something to do with router behaviour – Dvdgld Aug 02 '21 at 11:02

1 Answers1

2

It seems like Firefox treats multiple events on an element differently than Chrome which is why your code doesn't work as expected. I'm not exactly sure at this point, but it might be that Chrome works off all event listeners from the bottom up, whereas Firefox works from top down. This results in Chrome not firing the 1st event since the previous one (in this case the 2nd) uses prevent default, as you can see on the images below (that's just the event you added using @click.native.capture.prevent).

Chrome event handler:

Chrome event handler

Firefox event handler:

Firefox event handler

Since Vue Router adds a click event to a router-link on default you can solve this issue by either adding a wrapper to your child component (in this case the event won't get captured by the router-link since the wrapper prevents it)

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

or by manually overwriting the event property.

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

You can see how it works using a wrapper here.

Aer0
  • 3,792
  • 17
  • 33
  • Thank you @Aer0. I found both workarounds as well, but I was wondering what's the difference in handling events between these browsers. Your explanation clarified things! :) – Dvdgld Aug 03 '21 at 08:55
  • 1
    Glad I could help. To be honest, it drove me nuts as well since I didn't know there'd be such a simple difference. Learned something new too, so it's been a total win:win. :-) – Aer0 Aug 03 '21 at 09:05