Estoy usando Vue2 y tengo la etiqueta <a> con href='#' y @click.prevent="someMethod()" .
Esto funciona como se esperaba en una situación en la que se hace clic con el botón izquierdo (está llamando a un método), pero si hago right click -> open in new tab , en ese caso está abriendo el valor href , lo cual es incorrecto.
¿Qué enfoque sugiere para llamar también a @click.prevent="someMethod()" cuando se abre desde situaciones sin clic izquierdo?
Si desea controlar el comportamiento de todos los clics, deberá agregar más de un controlador de eventos de clic.
Algo como esto. Aquí hay un JSFiddle de trabajo del código.
<a href="#" @click.prevent="someMethod()" @auxclick.prevent="someMethod()" @contextmenu.prevent > Click Me </a> </div> @click.prevent maneja eventos de clic izquierdo.
@auxclick.prevent maneja eventos de clic auxiliar (es decir, eventos que no son de clic izquierdo).
@contextmenu.prevent desactiva el menú contextual que aparece cuando hace clic derecho en el elemento.
Mantuve el enlace de anclaje con @click.prevent + agregué :href='sameMethodAsInClickEvent()' , por lo que ahora, si no es un clic izquierdo, llamará a href y aun así abrirá el enlace/método correcto.
No puede anular el comportamiento del menú contextual nativo Abrir en una nueva pestaña; siempre abrirá el href del ancla en una nueva pestaña.
Sus únicas opciones son:
@contextmenu.prevent . No es buena UX.<button> . Este fue mi primer pensamiento ya que de todos modos no necesitas un ancla aquí porque no hay un vínculo real.