Nuxt.js: Can't prevent middle click to open href in new tab

[ambrt]

Version

v2.5.1

Reproduction link

https://ykrkz6k081.sse.codesandbox.io/

Steps to reproduce

<template><a href="https://google.com"
        @click.prevent
       @click.middle.prevent.stop="goto" 
        >Should not open with
        middle click</a>

<script>
methiods:{
   goto(e){
      e.preventDefault();
      return false
    }

What is expected ?

should block middle click from opening in new tab

What is actually happening?

Chrome opens link in new tab.

Additional comments?

Left click works correctly (is blocking with .prevent). Middle isn't;

_{This bug report is available on Nuxt community (#c9062)}

[ambrt]

Link to editor of codesandbox https://codesandbox.io/s/ykrkz6k081?fontsize=14

[asg5704]

Hello @ambrt seems like this is an issue specifically within the Vue.js. I'll open a PR with the Vue team. A workaround for this would be to set it to this @auxclick.prevent.stop='goto' instead of listening to the @click, I hope this helps you. 😄

[ambrt]

@asg5704 Thanks, it works😃 . Btw,is @auxclick something internal in Vue? I couldn't find anything in docs about it. (I'm closing issue but still curious )

[asg5704]

@ambrt, No it is not in the Vue docs.

[rchl]

auxclick is the name of the event supported by browsers - https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event
It doesn't need to be listed in Vue docs as Vue can handle any arbitrarily named event, this one just being one of them.