如何让<a>标签点击时同时在两个新标签页打开两个不同URL

问题原因 #

第一种方案失效原因 #

左键点击时，window.open('URL2') 触发后，部分场景下a标签的原生跳转行为被浏览器弹窗拦截逻辑干扰，导致仅弹出URL2；中键点击、右键菜单选择新标签页打开属于浏览器原生跳转行为，不会触发onclick绑定的JS逻辑，因此仅打开URL1。

第二种方案失效原因 #

1. a标签未设置href属性，浏览器不会将其识别为可跳转链接，中键、右键的原生跳转选项默认不生效
2. 未先获取DOM元素直接用myId绑定事件，仅部分老旧浏览器支持该写法，兼容性极差
3. location.href是修改当前页面地址，不是打开新标签页，不符合需求

正确实现方案 #

基础版（兼容左键点击） #

HTML代码：

<a href="https://example1.com" target="_blank" id="doubleLink">点击打开两个链接</a>

JS代码：

document.getElementById('doubleLink').addEventListener('click', function(e) {
  // 阻止a标签默认跳转行为
  e.preventDefault();
  // 两个链接都用新标签页打开
  window.open('https://example1.com', '_blank');
  window.open('https://example2.com', '_blank');
});

增强版（兼容左键+中键点击） #

额外监听中键点击的auxclick事件，覆盖更多点击场景：

const linkEl = document.getElementById('doubleLink');
const openTwoUrls = () => {
  window.open('https://example1.com', '_blank');
  window.open('https://example2.com', '_blank');
}

// 监听左键点击
linkEl.addEventListener('click', (e) => {
  e.preventDefault();
  openTwoUrls();
})
// 监听中键点击
linkEl.addEventListener('auxclick', (e) => {
  // 仅处理中键触发的事件（按键码为1）
  if(e.button === 1) {
    e.preventDefault();
    openTwoUrls();
  }
})

注意事项 #

• 右键菜单选择「新标签页打开」属于浏览器原生行为，受安全策略限制无法被JS劫持，该场景下仅能打开a标签href属性中填写的链接，无法同时打开两个
• 两个window.open必须在用户主动触发的同步事件回调中执行，否则会被浏览器弹窗拦截机制拦截
• 部分浏览器的弹窗拦截插件可能会阻止多标签同时弹出，属于用户本地配置限制，无法通过代码解决

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