jQuery批量触发多个<a>标签点击打开新标签仅首个生效的问题

页面中有多个<a>标签，希望通过jQuery触发所有标签的点击事件，使每个链接在新标签页中打开，但目前仅第一个标签生效。尝试代码如下：

$('.tbl a').each(function () {
    var url = $(this).attr("href");
    window.open(url, '_blank');
})

注：在each方法中设置背景色可正常生效，但打开新标签页的操作无法全部执行。

原因分析 #

这是浏览器弹窗拦截机制导致的：

• 浏览器会严格限制非用户主动交互触发的window.open调用，仅第一个调用可能因处于初始用户事件上下文未被拦截，后续循环调用脱离该上下文，被判定为自动弹窗而拦截。
• 修改元素样式（如背景色）不属于弹窗类操作，不受该机制限制，因此能正常执行。

解决方案 #

1. 模拟原生点击事件 #

直接触发<a>标签的原生点击行为，浏览器会将其识别为用户主动操作，不会拦截。可以先给链接添加target="_blank"再触发点击：

$('.tbl a').attr('target', '_blank').each(function() {
    // 使用原生DOM元素的click方法，更贴近真实用户触发
    this.click();
});

若不想修改target属性，可通过构造鼠标事件触发：

$('.tbl a').each(function() {
    const clickEvent = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    });
    this.dispatchEvent(clickEvent);
});

2. 直接设置链接的target属性 #

如果只是希望这些链接在新标签页打开，无需手动触发点击，直接给所有<a>标签添加target="_blank"即可：

$('.tbl a').attr('target', '_blank');

后续用户点击链接时会自动在新标签页打开。

3. 确保代码在用户主动事件中执行 #

若当前代码是页面加载时自动执行的，必然会被拦截。需将逻辑放在用户主动触发的事件（如按钮点击）中：

// 假设页面有一个id为open-all的按钮
$('#open-all').click(function() {
    $('.tbl a').each(function() {
        this.click();
    });
});

此时所有操作都处于用户主动交互的上下文内，浏览器不会拦截。

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