javascript - 功能运行的次数多于需求的次数

Question

我动态创建了元素。在 vanilla JS 中，我们只能通过 document.addEventListener('click',function(){//do smth}); 与此类元素进行通信。所以我有一个脚本，它采用动态创建的按钮并为它们添加事件监听器。

问题是，当我按一次某个按钮时，没问题，但随后脚本开始计算点击次数并在 btn.addEventListener('click', function(){//do smth });< 中执行代码 根据点击次数。例如，我点击 1 次 - 脚本进行 1 次，我点击 2 次 - 脚本进行 3 次，我点击 3 次 - 脚本进行 6 次，因为他统计了所有点击。我该如何解决这个问题？

document.addEventListener('click', addInCart);

function addInCart(){
    
    const productBtns = document.querySelectorAll('.product__btn');
    for(let btn of productBtns){
        btn.addEventListener('click', function(){
            //do smth
        });
    }
}

Answer 1

因为每次点击文档都会再次调用该功能，所以添加 {once: true} 以避免这种情况。

document.addEventListener('click', addInCart, {once: true});

function addInCart(){

    const productBtns = document.querySelectorAll('.product__btn');
    for(let btn of productBtns){
        btn.addEventListener('click', function(){
            //do smth
        });
    }
}