如何删除事件监听器。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 内部使用，都会在每次单击后添加一个新的侦听器。这可能会导致意外行为。