javascript - 如何从一组元素中删除多个事件侦听器？

Question

我有一组按钮元素，一旦满足条件，我希望它们变得无响应。我认为removeEventListener应该可以解决问题，但是在我的if 语句返回true之后，按钮仍然是可点击的。

const field = Array.from(document.querySelectorAll(".field"))
    const boardData = [];
    
    field.forEach(button => {
        
        const func = (e) => {


            
            if(xTurn) {
                if(checkWin(player1)){
                    freezeBoard(field,func)
                };
            }
            
            else  {                                           
                if(checkWin(player2)){
                    freezeBoard(field,func)                        
                };
            }
        }
        button.addEventListener("click", func)
        
    })
    function freezeBoard(buttons,func) {
        buttons.forEach(button => {

            button.removeEventListener("click", func);           
        })
    }

标签： javascriptevents

Answer 1

声明func外部，以便您只创建一个func- 当您在循环内创建它时，每个侦听器使用不同的引用，因此removeEventListener不起作用。

const field = Array.from(document.querySelectorAll(".field"))
const boardData = [];
const func = () => {
    if (xTurn) {
        if (checkWin(player1)) {
            freezeBoard(field, func)
        };
    } else {
        if (checkWin(player2)) {
            freezeBoard(field, func)
        };
    }
};
field.forEach(button => {
    button.addEventListener("click", func)
})
function freezeBoard(buttons, func) {
    buttons.forEach(button => {
        button.removeEventListener("click", func);
    })
}

可以通过删除参数和压缩条件来简化。

const buttons = Array.from(document.querySelectorAll(".field"))
const boardData = [];
const func = () => {
    if ((xTurn && checkWin(player1) || checkWin(player2))) {
        freezeBoard(field, func);
    }
};
buttons.forEach(button => {
    button.addEventListener("click", func)
});
function freezeBoard(buttons) {
    buttons.forEach(button => {
        button.removeEventListener("click", func);
    })
}