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?
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.
I have keeped anchor link with @click.prevent + added
:href='sameMethodAsInClickEvent()' so now, if it will be non-left-click, it will call href and still it will open the right link/method.
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:
@contextmenu.prevent. Not good UX.<button>. This was my first thought since you don't really need an anchor here anyway because there's no real link.