如何用jQuery检测用户是否要在新标签页/窗口打开链接？

用户可通过以下方式在新标签页/窗口打开链接：

• 点击滚轮（鼠标中键）
• Ctrl+左键点击（部分系统）
• 右键打开上下文菜单，选择“在新标签页打开”或“在新窗口打开”

我需要确保在打开新页面前运行一段脚本，该脚本会根据多种因素为URL添加参数，但目前仅通过判断event.button == 1处理了中键点击的情况。

存在以下疑问：

• 如何检测用户是通过右键菜单选择打开新标签页/窗口？使用event.button == 2会在右键点击时就触发，而用户可能只是复制链接而非打开；
• 若用户有自定义快捷键（如CTRL+ALT+K+第7鼠标键这类示例），该如何处理？
• 是否存在“打开新标签页”相关的事件可监听？
• 是否有办法覆盖所有“在新标签页打开”的操作场景，确保脚本在新页面打开前运行？

1. 右键菜单打开场景的处理 #

右键菜单的“在新标签页打开”无法通过常规点击事件直接监听，纯前端环境下没有完美的原生事件支持，但可以通过两种思路处理：

• 标记右键点击状态+辅助判断：先通过contextmenu事件标记用户是否右键点击了链接，再结合后续操作辅助判断，但精度有限——因为右键菜单选择后不会触发常规点击事件。示例代码：

  let isRightClickedLink = false;
  document.addEventListener('contextmenu', (e) => {
    if (e.target.tagName === 'A') {
      isRightClickedLink = true;
      // 1秒后重置标记，避免误判其他操作
      setTimeout(() => { isRightClickedLink = false; }, 1000);
    }
  });
  

• 浏览器扩展API（最优解）：如果是开发浏览器扩展，用webNavigation.onBeforeNavigate事件能完美解决——无论用户通过哪种方式触发导航，都能在跳转前拦截并修改URL。示例代码：

  chrome.webNavigation.onBeforeNavigate.addListener((details) => {
    // 只处理主框架的导航，过滤iframe
    if (details.frameId === 0 && details.url.startsWith('http')) {
      // 调用你的参数添加逻辑
      const newUrl = addParamsToUrl(details.url);
      if (newUrl !== details.url) {
        chrome.tabs.update(details.tabId, { url: newUrl });
      }
    }
  });
  

2. 自定义快捷键与特殊鼠标键的处理 #

自定义快捷键或特殊鼠标键最终都会触发页面导航事件，用上述的webNavigation.onBeforeNavigate监听即可拦截。如果是纯前端页面，这类操作无法直接监听具体触发事件，只能通过拦截所有可能的导航入口（比如覆盖链接默认行为）间接处理。

3. 覆盖所有打开新标签场景的方案 #

• 纯前端环境：组合监听多种点击事件，覆盖中键、Ctrl+左键场景，静态参数场景可预先修改链接href：

  // 处理中键点击
  document.addEventListener('auxclick', (e) => {
    if (e.target.tagName === 'A' && e.button === 1) {
      e.preventDefault();
      const newUrl = addParamsToUrl(e.target.href);
      window.open(newUrl, '_blank');
    }
  });
  
  // 处理Ctrl/Cmd+左键点击
  document.addEventListener('click', (e) => {
    if (e.target.tagName === 'A' && (e.ctrlKey || e.metaKey)) {
      e.preventDefault();
      const newUrl = addParamsToUrl(e.target.href);
      window.open(newUrl, '_blank');
    }
  });
  
  // 静态参数场景：预先修改所有链接的href
  document.querySelectorAll('a').forEach(link => {
    link.href = addParamsToUrl(link.href);
  });
  

  缺点是右键菜单打开的场景无法覆盖，且静态参数无法根据打开时的动态因素调整。
• 浏览器扩展环境：使用webNavigation或declarativeNetRequest API，能拦截所有导航行为，是覆盖所有场景的唯一可靠方式。

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