removeEventListener 仅删除单个实例

Question

我一直遇到问题，当我尝试从按钮中删除事件时，它似乎只删除了一个按钮的事件，即使我已经遍历按钮并删除了事件。

谢谢。

function ChangeQuestions() {
    let currentQuestion = getQuestion(); //another function to get the question from an array - returns an object with questions, answers and correctAnswer
    const correctAnswer = currentQuestion.correct;
    console.log(currentQuestion);
    if (questionsArray.length === 0) {
        //If the array is empty push the questions again
        questionsArray.push(firstQuestion, secondQuestion, thirdQuestion);
    }
    document.querySelector('.question-header').textContent = currentQuestion.questions;
    for (let i = 1; i < 4; i++) {
        document.querySelector('.btn-Ans-' + i).textContent = currentQuestion.answers[i - 1];
        document.querySelector('.btn-Ans-' + i).addEventListener('click', function checkAns(e) {
            if (e.target.innerHTML === correctAnswer) {
                score++;
                console.log(score);
                removeEvent('click', checkAns);
                ChangeQuestions();
            } else {

                console.log(score);
                removeEvent('click', checkAns);
                ChangeQuestions();
            }
        });
    }
}


function removeEvent(event, func) {
    for (let i = 1; i < 4; i++) {
        document.querySelector('.btn-Ans-' + i).removeEventListener(event, func);
    }
}

Answer 1

有

for (let i = 1; i < 4; i++) {
  document.querySelector('.btn-Ans-' + i).addEventListener('click', function checkAns(e) {

一个新的 checkAns 函数被创建 在循环的每次迭代 中，并且 removeEventListener 必须传递 完全相同的函数 addEventListener 被调用。由于不同的循环迭代将不同的函数传递到各自的 addEventListener 调用中，因此 removeEvent 函数似乎只影响被单击的元素，其余的 none。

这是一个更简单的例子：

const fns = [];
for (let i = 0; i < 2; i++) {
  const foo = () => console.log('foo');
  fns.push(foo);
  window.addEventListener('click', foo);
}

// Not the same function:
console.log(fns[0] === fns[1]);

我只向容器添加一个单个侦听器，并使用事件委托来检查单击了哪个元素：

btnContainer.addEventListener('click', function handler(e) {
  if (!e.target.matches('[class^="btn-Ans"]')) {
    return;
  }
  btnContainer.removeEventListener('click', handler);
  if (e.target.innerHTML === correctAnswer) {
    score++;
  }
  console.log(score);
  ChangeQuestions();
});

其中 btnContainer 是您 btn-Ans- 的容器。

removeEventListener 仅删除单个实例

removeEventListener only removing single instance

javascript

removeeventlistener