点击监听器触发两次。

Question

我正在创建Simon游戏作为Freecodecamp挑战，我完成了基本的事情，现在我正在努力重置游戏。 我有一个函数可以重置它，清除数组，超时等。

问题是当我再次点击开始按钮开始新游戏时，它会重置，开始新游戏，但是单击颜色会在玩家数组中将颜色推两次。

以下是一些代码：codepen

        function reset() {
        clearTimeout(repeating);
        clearTimeout(genColor);
        pickedColors = []; // computer random colors
        guessingColors = []; //colors that player picks, should match picked ones
        gameOn = false;
        countNumber = 0;  
    }

     function game() {
// Counting
  console.log(pickedColors, guessingColors);
      counter.innerHTML = countNumber;
// New color
          genRandom = setTimeout(() => {
             getRandomColor();
              }, 5);
        guessingColors = [];
 // Add click listener for each color
  for(let i=0; i<colors.children.length; i++) {
    // Guessing

    colors.children[i].addEventListener("click", function(e) {
      if(!running) {
        // Add clicked color to user clicked array
          guessingColors.push(this);
        console.log(guessingColors);
      // Add animation class
        clickClass(this);
      } else {
        e.stopPropagation();
      }

    // repeating.....

running 是一个布尔值，用于在计算机回合结束时停止点击监听器。

- merko

---

你需要在game函数之外附加监听器，或者在reset函数中分离监听器。 - Teemu

请查看此链接：https://dev59.com/VV8e5IYBdhLWcg3wEG7A - PSK

Answer 1

理想情况下，在使用完事件监听器后应将其移除或将其放在game()之外，但这里有一个快速修复方法：

使用.onclick代替addEventListener，这将覆盖原始的事件，而不是在调用game()时添加另一个事件。您可以在其他地方使用if(colors.children[i].onclick)检查元素是否已附加onclick事件。

您的PEN中的157行变为：colors.children[i].onclick = function(e) { 并删除第204行上的)。

document.querySelector('#btn').onclick = function() {
  console.log('here');
};

document.querySelector('#btn').onclick = function() {
  console.log('hello'); // this will overwrite the first one
}; 

if (document.querySelector('#btn').onclick)
  console.log('it has an event listener');
else
  console.log('it does not');

<button id="btn">Click me</button>

- Taki

---

谢谢，这刚刚救了我的命！ - lharby