如何在通过insertAdjacentHTML添加的锚点(a)标签中根据条件阻止默认跳转行为？

我明白你遇到的问题了——当用insertAdjacentHTML动态插入a标签时，既要传递数组参数判断长度，又要根据条件阻止默认跳转，确实容易踩坑。咱们先分析下你现有代码的核心问题，再给出可行的解决方案。

你的代码存在的关键问题 #

1. 作用域冲突：在insertAdjacentHTML的字符串里写onclick="ps_block_user(elem)"时，这里的elem是addElements函数的局部参数，全局作用域找不到它，点击时会直接报错elem is not defined。
2. 阻止跳转的逻辑错误：即使ps_block_user函数返回false，内联onclick也需要写成return ps_block_user(...)，才能让浏览器识别并阻止默认跳转行为。

解决方案1：修正内联onclick写法（快速适配现有代码） #

如果一定要用内联onclick，需要把数组参数转换成全局可解析的形式，同时修正阻止跳转的逻辑：

let array = ['1', '2', '3'];

function addElements(elem) {
    let elem1 = document.querySelector('.elem1');
    // 把数组转成JSON字符串，避免字符串拼接的引号冲突
    let elemStr = JSON.stringify(elem);
    // 内联onclick必须加上return，才能通过返回false阻止跳转
    elem1.insertAdjacentHTML('beforeend', `<a class='atag' onclick="return ps_block_user(${elemStr})" href="./compare-products/" target="_blank">cliquez pour comparer</a>`);
}

function ps_block_user(elem) {
    if (elem.length > 3) {
        alert('Un maximum de 3 produits à comparer est possible!');
        return false; // 返回false阻止a标签的默认跳转
    }
    // 条件满足时不返回false，浏览器自动执行跳转
}

addElements(array);

解决方案2：使用事件监听（推荐，更安全可靠） #

内联事件处理函数容易引发作用域混乱和XSS风险，更推荐用事件监听的方式，逻辑更清晰：

方式A：插入标签后直接绑定监听

let array = ['1', '2', '3'];

function addElements(elem) {
    let elem1 = document.querySelector('.elem1');
    // 先插入不带内联事件的a标签
    elem1.insertAdjacentHTML('beforeend', `<a class='atag' href="./compare-products/" target="_blank">cliquez pour comparer</a>`);
    // 获取刚插入的a标签
    let newATag = elem1.querySelector('.atag:last-child');
    // 绑定点击事件
    newATag.addEventListener('click', function(e) {
        if (elem.length > 3) {
            alert('Un maximum de 3 produits à comparer est possible!');
            e.preventDefault(); // 明确阻止默认跳转行为
        }
        // 条件满足时不调用preventDefault，浏览器自动跳转
    });
}

addElements(array);

方式B：事件委托（适合批量动态插入的场景）

如果后续会多次插入同类a标签，用事件委托只需给父元素绑定一次监听，性能更优：

let array = ['1', '2', '3'];

// 给父元素添加事件委托
document.querySelector('.elem1').addEventListener('click', function(e) {
    // 判断点击目标是我们的a标签
    if (e.target.classList.contains('atag')) {
        if (array.length > 3) {
            alert('Un maximum de 3 produits à comparer est possible!');
            e.preventDefault();
        }
    }
});

function addElements() {
    let elem1 = document.querySelector('.elem1');
    elem1.insertAdjacentHTML('beforeend', `<a class='atag' href="./compare-products/" target="_blank">cliquez pour comparer</a>`);
}

addElements(array);

关于你最后尝试的监听代码的问题 #

你那段代码的两个核心问题：

1. 如果在addElements执行前就获取atag，此时标签还未插入DOM，监听会绑定失败。
2. 箭头函数里的return false无法阻止默认跳转，必须用e.preventDefault()明确阻止。

修正后的版本如下：

function addElements(elem) {
    let elem1 = document.querySelector('.elem1');
    elem1.insertAdjacentHTML('beforeend', `<a class='atag' href="./compare-products/" target="_blank">cliquez pour comparer</a>`);
    // 插入后再获取标签并绑定监听
    let atag = elem1.querySelector('.atag:last-child');
    atag.addEventListener('click', (e)=>{
        if(elem.length>3){
            alert('Un maximum de 3 produits à comparer est possible!');
            e.preventDefault(); // 阻止默认跳转
        }
    });
}

备注：内容来源于stack exchange，提问作者Mehdi