Firefox中window.open()按Ctrl点击链接时前台打开标签的问题

问题根源 #

你当前的代码通过event.preventDefault()完全阻止了链接的原生行为，转而用window.open()手动打开标签页。但Firefox对脚本触发的window.open()行为判定和Chrome不同：即使按住Ctrl/Meta键，脚本调用的window.open()会被视为“主动触发”，强制前台打开，不受你设置的“后台打开新标签”选项影响。

解决方案 #

核心思路是让浏览器原生处理Ctrl/Meta点击的场景，只在普通点击时干预行为（比如单页应用的前端路由跳转），同时保留链接的href属性以支持右键菜单。

修改后的代码如下：

const redirect = (event: React.MouseEvent<HTMLElement>): boolean => {
  event.stopPropagation();
  
  // 仅当未按住Ctrl/Meta键时，阻止默认行为并执行自定义跳转
  if (!(event.ctrlKey || event.metaKey)) {
    event.preventDefault();
    // 这里替换为你的自定义逻辑，比如React Router的history.push
    // history.push(url);
  }
  
  // 允许浏览器处理Ctrl/Meta点击的原生行为
  return true;
};

关键说明 #

1. 恢复链接的href属性：确保你的<a>标签设置了正确的href={url}，这样右键菜单的“在新标签页打开”选项才能正常工作，同时浏览器能识别原生的Ctrl/Meta点击行为。
2. 避免完全阻止默认行为：只在普通点击时阻止默认，让浏览器自己处理快捷键点击，这会遵循用户在Firefox中设置的“后台打开新标签”偏好。
3. 脚本触发的window.open()局限性：Firefox对脚本打开的窗口有独立的行为规则，即使你添加window.open(url, '_blank', 'noopener,noreferrer')，依然会前台打开，因此优先依赖浏览器原生行为是更可靠的方案。

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