如何设置a标签href避免父页刷新 支持右键新标签及默认新开窗口

修正后代码 #

const handleClick = (e) => {
  // 阻断a标签原生跳转逻辑，避免父页面重载
  e.preventDefault();
  window.open(
    href,
    'newwindow',
    `width=${window.outerWidth * 0.5}, height=${
      window.outerHeight
    }, left=${window.outerWidth * 0.25}`
  );
};

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

实现逻辑说明 #

• 保留href属性为真实目标地址，浏览器右键菜单会直接读取该属性值，完全支持「在新标签页打开」功能，不会出现about:blank#blocked异常
• 点击事件触发时优先调用e.preventDefault()，完全阻断a标签原生跳转行为，父页面不会发生重载
• 自定义window.open逻辑保持不变，点击标签默认弹出指定尺寸的独立新窗口打开目标链接

补充说明：原来的代码仅返回false无法在所有场景下阻断默认跳转，显式调用e.preventDefault()兼容原生JS、React、Vue等所有前端场景。

内容的提问来源于stack exchange，提问作者Arjjun