将 url 添加到 <a> 标记上的 href 但不想重新加载行为答案

【问题标题】：Add url to href on <a> tag but do not want to reload behavior将 url 添加到 <a> 标记上的 href 但不想重新加载行为
【发布时间】：2021-09-21 06:33:38
【问题描述】：

以下代码在新窗口中打开锚标记但是，我不想重新加载父页面。而且我还希望能够在鼠标右键单击时在新选项卡中打开（下图）

如果我使用href = {'javascript:'}，它会阻止父页面重新加载，但是，当单击“在新选项卡中打开”时，它会在新选项卡上打开，但 url 变为 about:blank#blocked

const handleClick = () => {
      window.open(
        href,
        'newwindow',
        `width=${window.outerWidth * 0.5}, height=${
          window.outerHeight
        }, left = ${window.outerWidth * 0.25} `
      );
      return false;
  };

<a href = {href} onClick = {handleClick}> This is Url </a>

期望的结果：

默认情况下，在新窗口中打开。
防止父窗口刷新。
右键单击可以在新标签页上打开。

【问题讨论】：

当您右键单击时，您不想显示菜单吗？直接打开新标签？
我希望菜单显示出来，并且可以点击并指向正确的网址。如果我将 url 传递给 <a href = {href} > </a> 这将重新加载页面。我不想重新加载页面。

标签： javascript html dom-events anchor

【解决方案1】：

为此，您需要target="_blank"。

<a href="www.google.com" target="_blank">Click</a>

【讨论】：

【解决方案2】：

要在新窗口或新选项卡中打开链接，您可以在锚标记中使用目标属性，即<a href="https://example.com" target="_blank">...</a>

【讨论】：