如何删除事件监听器。removeEventListener 不起作用

Question

我有一个“开始游戏”按钮，当你点击游戏开始时按钮上的文字变为“重复” - 随机选择一张纸牌并播放纸牌的声音，你需要猜测这是哪张卡。但是当游戏开始时，如果你按下这个按钮，那么它应该已经作为复读机工作了，也就是说你可以再次听到这个词。如何在按下按钮时删除新单词的播放，并重复已经发音的单词。RemoveEventListener 不起作用。当我点击它时，它会同时播放新旧单词

const startGameBtn = document.getElementById('start-game');

startGameBtn.addEventListener('click', function() { 

  startGameBtn.innerHTML = 'Repeat';

  startGameBtn.classList.add('repeat');  

  startGame(); 

}) 

startGameBtn.removeEventListener('click', function() {

  startGame()

});

function startGame() {

  let randomCard = createRandomCard(); 

  randomCard.querySelector('audio').play(); 

  document.getElementById('category').addEventListener('click', (e) => {

    if(document.body.classList.contains('game-mode')) {

      if(e.target.closest('.card-item') === randomCard) {

        e.target.closest('.card-item').classList.add('checked-card');  

        randomCard = createRandomCard();

        setTimeout(function(){ randomCard.querySelector('audio').play(); }, 2500);  

      } else {

        let error = 'audio/error.mp3';

        playAudio(error)

      }    

    }   

  }) 

  document.querySelector('#start-game').addEventListener('click', function() {

    randomCard.querySelector('audio').play();

  })

}

Answer 1

当您使用时，addEventListener您使用匿名函数调用您的函数并在按钮上startGame设置和类。innerHTML您在 中使用的函数removeEventListener也是匿名的，因此永远不可能与您在addEventListener. 这将导致removeEventListener调用不删除侦听器，因为它根本不知道要删除什么。因此，创建对（非匿名）函数的引用并将该引用传递给addEventListener和removeEventListener。const startGameBtn = document.getElementById('start-game');// Create reference to function.const onStartClick = () => {  startGameBtn.innerHTML = 'Repeat';  startGameBtn.classList.add('repeat');    startGame(); };// Use reference in adding and removing the event listeners.startGameBtn.addEventListener('click', onStartClick);startGameBtn.removeEventListener('click', onStartClick);至于其余代码，请记住，无论何时在单击时执行的函数addEventListener 内部使用，都会在每次单击后添加一个新的侦听器。这可能会导致意外行为。