本文介绍一种可靠、跨浏览器的方案，将原始点击事件及其所有上下文信息（如 ctrlKey、metaKey、shiftKey、button 等）完整“转发”至另一个 DOM 元素，使其触发浏览器原生行为（如新标签页打开、新窗口、阅读列表等），而无需硬编码判断键位或模拟跳转逻辑。
本文介绍一种可靠、跨浏览器的方案，将原始点击事件及其所有上下文信息（如 `ctrlkey`、`metakey`、`shiftkey`、`button` 等）完整“转发”至另一个 dom 元素，使其触发浏览器原生行为（如新标签页打开、新窗口、阅读列表等），而无需硬编码判断键位或模拟跳转逻辑。
在 Web 开发中，常需实现「点击容器区域即等效点击内部链接」的交互（例如整行表格 <tr> 点击跳转至 <code><a></a>）。但直接调用 element.click() 仅触发默认行为，完全丢失用户按下的修饰键（Ctrl/Cmd/Shift）及鼠标按钮等上下文，导致无法复现原生链接的智能导航逻辑（如 Cmd+Click 新建标签页、Shift+Click 新建窗口、Cmd+Shift+Click 切换并新建标签页等）。
遗憾的是，dispatchEvent(new MouseEvent(...)) 方案虽能复制事件属性，却因生成 untrusted event（非可信事件） 被主流浏览器（尤其是 Firefox）拦截关键操作（如弹出新窗口/标签页），即使参数完全一致也无法触发原生导航策略。
✅ 正确解法：不伪造事件，而是复用原生事件驱动逻辑
核心思想是：让目标 <a></a> 元素“感知”到当前点击的完整修饰键状态，并交由浏览器自身调度器处理。这要求我们绕过 click() 方法，改用 location 导航 + window.open() 组合，并严格遵循浏览器对 window.open() 的信任规则：
document.querySelector('#b').addEventListener('click', (e) => {
const link = document.querySelector('#a');
const href = link.href;
const target = link.target || '_self';
// 关键：仅当用户意图新上下文时，显式调用 window.open
// 否则直接赋值 location —— 完全复现原生 <a> 行为
if (e.ctrlKey || e.metaKey || e.shiftKey) {
e.preventDefault(); // 阻止默认行为（避免重复跳转）
// 使用 window.open 并指定 features，确保新窗口/标签页被允许
// 注意：必须在用户手势（click）同步上下文中调用，否则被拦截
const features = [
'noopener',
'noreferrer',
e.shiftKey ? 'menubar=yes,toolbar=yes' : 'noopener,noreferrer'
].join(',');
// 根据组合键智能选择打开方式（贴近原生语义）
const win = window.open(
href,
e.ctrlKey || e.metaKey ? '_blank' : '_self',
features
);
if (!win || win.closed || typeof win.closed === 'undefined') {
// fallback：若 popup 被拦截，退化为 location.assign
location.assign(href);
}
} else {
// 无修饰键 → 直接触发原生跳转（等效于点击 <a>）
link.click();
}
});⚠️ 重要注意事项：
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
-
window.open()必须在用户触发的事件处理器内（如click、keydown）同步调用，否则会被浏览器标记为“非用户发起”，强制拦截； - 沙箱环境（如
<iframe sandbox></iframe>）需显式添加allow-popups权限，否则window.open()始终失败； - 不要尝试
new MouseEvent(e.type, e)后dispatchEvent()—— 即使属性全量复制，untrusted 事件仍无法触发受保护的导航行为； -
e.button（左/中/右键）、e.detail（点击次数）等非导航相关属性，在链接跳转场景中通常无需特殊处理，浏览器已内置兼容； - 对于
<tr> 表格行场景，可绑定事件委托至 <code><tbody>，通过 <code>e.target.closest('a')安全获取目标链接，避免 HTML 结构变更影响。? 总结：真正的“事件转发”不是复制事件对象，而是复现用户意图与浏览器决策链路。通过精准识别修饰键状态 + 条件化使用
link.click()/window.open()+ 严格遵守用户手势约束，即可在不修改 HTML 的前提下，100% 还原原生<a></a>标签的全部导航语义，兼容 Chrome、Firefox、Safari 及其差异化的快捷键策略。
