'Open in new tab'点击link未打开href值

Question

我正在使用 Vue2，并且我有 <a> 标签以及 href='#' 和 @click.prevent="someMethod()"。
在左键单击（它正在调用方法）的情况下，这按预期工作，但如果我执行 right click -> open in new tab，在这种情况下它会打开 href 值，这是错误的。

为了在非左键单击情况下打开时也调用 @click.prevent="someMethod()"，您建议采用哪种方法？

Answer 1

如果您希望控制所有点击的行为，则需要添加多个点击事件处理程序。

像这样。 Here's a working JSFiddle of the code.

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

@click.prevent 处理左键单击事件。

@auxclick.prevent 处理 auxclick 事件（即非左键单击事件）。

@contextmenu.prevent 禁用右键单击元素时弹出的上下文菜单。

Answer 2

您无法覆盖在新标签页中打开的本机上下文菜单行为；它总是会在新标签页中打开锚点的 href。

您唯一的选择是：

阻止上下文菜单显示 @contextmenu.prevent。用户体验不好。
阻止上下文菜单，而是显示您自己的自定义上下文菜单，其中包含您可以自行处理的“在新选项卡中打开”项。
使用 <button>。这是我的第一个想法，因为这里根本不需要锚点，因为没有真正的 link.

Answer 3

我用@click.prevent + 添加了锚 link :href='sameMethodAsInClickEvent()' 所以现在，如果它是非左键单击，它将调用 href 并且仍然会打开右侧 link/method.

'Open in new tab'点击link未打开href值

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

html

javascript

vue.js

vuejs2