如何将网页左键点击改为中键/Ctrl+点击，避免音频动画中断？

嗨，我来帮你搞定这个头疼的问题～

首先得搞清楚为什么会出现这种差异：现代浏览器（包括Firefox 66+）会把左键点击target="_blank"打开的新标签页视为用户主动切换了焦点，因此会将原页面标记为“非活跃状态”，自动暂停媒体播放和Canvas动画。而中键/Ctrl+左键打开后台标签时，浏览器认为你还会继续关注原页面，所以不会触发暂停行为。

你之前尝试修改点击事件的button属性是行不通的——浏览器事件对象的这类属性大多是只读的，没法直接修改。下面给你两个可行的解决方案：

方案一：拦截链接点击，用window.open替代默认行为 #

这是最稳妥的方法，我们可以监听所有带target="_blank"的<a>标签，拦截无快捷键的左键点击，改用window.open打开新标签，让浏览器认为原页面仍处于活跃状态。

代码示例：

$(document).on('click', 'a[target="_blank"]', function(event) {
  // 仅处理纯左键点击（未按下Ctrl/Command/Shift键）
  if (event.button === 0 && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
    event.preventDefault(); // 阻止默认跳转行为
    // 打开新标签，添加noopener保证安全，避免新页面对原页面的访问
    const newTab = window.open(this.href, '_blank', 'noopener');
    // 如果需要新标签获得焦点，可加上这行；如果想让原页面保持焦点，注释掉即可
    // newTab?.focus();
  }
});

为什么这个方法有效？ #

通过window.open在用户点击事件内打开新标签，浏览器不会将原页面标记为非活跃，因此音频和Canvas动画会继续正常运行。同时添加noopener参数是安全最佳实践，防止新标签页通过window.opener访问原页面的敏感数据。

方案二：给链接添加rel="noopener noreferrer"（辅助优化） #

虽然这不能直接解决暂停问题，但配合方案一使用，能进一步提升安全性，同时部分浏览器在识别到noopener时，会减少对原页面活跃状态的影响。你可以直接在<a>标签上添加：

<a href="xxx" target="_blank" rel="noopener noreferrer">链接文本</a>

额外注意事项 #

• 不要尝试模拟键盘/鼠标按键事件来欺骗浏览器，这类操作不仅容易被浏览器的安全机制拦截，还可能导致不可预期的行为。
• 测试时要确保是真实用户点击场景，脚本自动触发的window.open可能会被浏览器弹窗拦截，但在click事件回调内触发是被允许的。

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