“在新标签中打开”单击链接未打开 href 值答案

【问题标题】：'Open in new tab' click on link not open href value“在新标签中打开”单击链接未打开 href 值
【发布时间】：2021-11-26 04:44:10
【问题描述】：

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

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

【问题讨论】：

为什么要使用锚标签？为什么不使用按钮？这将是符合 aria 标准的方式。
不幸的是，这是我们必须遵循的“公司规则”，所有链接都必须作为锚标记
您是否只是想要这样当有人右键单击<a> 标签时才触发该方法？您说当您右键单击并选择“在新选项卡中打开”时，该行为是错误的，但尚不清楚您认为正确的行为应该是什么。如果只想控制右键事件，可以使用@click.right明确控制右键。
@RobertStefanic，我需要对所有点击具有相同的行为（左键单击、ctrl + 左键单击、命令 + 左键单击 iOS，右键单击 + 在新选项卡中打开等）。预期的行为是 click 触发方法，而不是 href 值
@99Coder “在新选项卡中打开”不应执行与左键单击相同的操作。您还说这是公司政策，所有链接必须是锚标记（好），但在这种情况下这真的是链接吗？它看起来像一个按钮。您始终可以使用按钮，但如果您愿意，可以将其设置为链接。

标签： javascript html vue.js vuejs2

【解决方案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 禁用右键单击元素时弹出的上下文菜单。

【讨论】：

关于@contextmenu.prevent，它应该是可见的并且打开in new tab的选项应该是活动的（而不是触发href链接），不需要隐藏上下文菜单
在出现上下文菜单时更改函数中锚标记的href，然后将其更改回“#”一定的时间，你真的做不到。这就是浏览器处理右键单击<a> 标签的方式。我知道你说过在这里使用锚标签是一个硬性要求，但你无法真正控制它。另一种方法是制作自己的上下文菜单，并在用户右键单击 <a> 标记时将其显示给用户。

【解决方案2】：

您不能覆盖原生上下文菜单在新选项卡中打开的行为；它总是会在新标签页中打开锚点的 href。

您唯一的选择是：

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

【讨论】：

【解决方案3】：

我保留了@click.prevent + 添加的锚链接 :href='sameMethodAsInClickEvent()' 所以现在，如果不是左键单击，它将调用 href 并且仍然会打开正确的链接/方法。

【讨论】：