'Open in new tab' click on link not open href value-CodePudding

I am using Vue2 and I have <a> tag with href='#' and @click.prevent="someMethod()".
This is working as expected in a situation when do a left click (it is calling a method), but if I do a right click -> open in new tab, in that case it is opening href value, which is wrong.

Which approach do you suggest in order to also call a @click.prevent="someMethod()" when opening from non-left click situations?

CodePudding user response：

If you're looking to control the behavior for all clicks, then you'll need to add more than one click event handler.

Something like this. Here's a working JSFiddle of the code.

  <a
    href="#"
    @click.prevent="someMethod()"
    @auxclick.prevent="someMethod()"
    @contextmenu.prevent
  >
    Click Me
  </a>
</div>

@click.prevent handles left click events.

@auxclick.prevent handles auxclick events (i.e. non-left click events).

@contextmenu.prevent disables the context menu that pops up when you right click on the element.

CodePudding user response：

You cannot override the native context menu Open in New Tab behavior; it will always open the anchor's href in a new tab.

Your only options are:

Prevent the context menu from being shown with @contextmenu.prevent. Not good UX.
Prevent the context menu but instead show your own custom context menu with an Open in New Tab item which you can handle yourself.
Use a <button>. This was my first thought since you don't really need an anchor here anyway because there's no real link.