如何让window.open遵循浏览器/系统默认行为，完成卡片组件无障碍优化

优先推荐：无JS原生HTML方案（最优无障碍+兼容性） #

HTML5 允许<a>标签嵌套块级元素，只要你的卡片内部没有其他独立交互元素（如其他链接、按钮、输入框），直接把整个卡片包裹在原来的标题<a>标签内即可：

<a href="你的链接地址" class="card-wrapper">
  <div class="card">
    <!-- 卡片所有内容 -->
    <h3>卡片标题</h3>
    <p>卡片描述</p>
  </div>
</a>

这个方案完全不需要JS，天然支持所有浏览器默认行为：

• 普通点击当前页跳转，按住Cmd/Ctrl/Shift/中键点击自动按用户习惯新开标签/窗口
• 无障碍体验最好：Tab键仅需聚焦一次，屏幕阅读器可正确识别链接属性
• 兼容所有浏览器，无额外性能开销

不能修改HTML结构时的JS方案 #

如果卡片内存在其他独立交互控件，无法用<a>包裹整个卡片，可修改你的JS代码如下：

function cardLinks() {
    let cards = document.querySelectorAll(".card");
    cards.forEach(function (box) {
        let link = box.querySelector("a");
        if (link) {
            // 支持键盘聚焦，符合无障碍要求
            box.setAttribute("tabindex", "0");
            box.style.cursor = "pointer";

            // 处理鼠标点击事件
            box.addEventListener("click", function (e) {
                // 避免点击卡片内其他交互元素时触发跳转
                const interactiveTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];
                if (interactiveTags.includes(e.target.tagName) || e.target.closest(interactiveTags.join(','))) {
                    return;
                }
                // 直接触发原有a标签的点击事件，完全复用浏览器默认行为
                link.click();
                // 阻止事件冒泡避免重复触发
                e.stopPropagation();
            });

            // 支持键盘操作：回车/空格触发跳转，符合无障碍规范
            box.addEventListener("keydown", function (e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    link.click();
                }
            });
        }
    });
}
document.addEventListener("DOMContentLoaded", function () {
    if ("querySelector" in document) {
        cardLinks();
    }
});

原代码问题说明 #

你之前的代码每次都新开标签，是因为window.open()方法默认会新开浏览上下文，且你跳过了浏览器默认的跳转判断逻辑，没有识别用户按下的修饰键状态。而直接调用原有<a>标签的click()方法，会自动继承浏览器对链接的所有默认处理逻辑，自动适配不同系统的修饰键行为，不需要手动判断。

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