Я создаю игру в крестики-нолики, в которую добавляю прослушивателей событий, чтобы проверить, нажата ли кнопка. Вот функция, которую я использую для добавления событий щелчка к элементам на моей странице:

function addClickEvents(){
  for (let i = 0; i < images.length; i++) {
    boxes[i].addEventListener(
      "click",
      function () {
        addEvents(i);
      },
      { once: true }
    );
  }
}

function addEvents(x) {
  document.images[x].style.display = "block";
}

Я хотел бы удалить эти события, чтобы не перекрывать их после перезагрузки игры. У меня на странице есть отдельная кнопка, которая сбрасывает игру. Есть ли способ удалить прослушиватели событий с помощью этой кнопки? Я использовал функцию, которая выглядит так, но, похоже, она не работает:

function resetGame() {
  for (let reset = 0; reset < 9; reset++) {
    document.boxes[reset].removeEventListener("click", addEvents);
  }
}

Я также попытался прикрепить функцию к переменной и добавить ее таким образом, но, насколько я знаю, это не работает, поскольку мне нужно передать переменную в функцию.

0
zbarnz 4 Май 2021 в 02:35

1 ответ

Лучший ответ

Вы можете попробовать добавить общий класс к своим элементам боксов, а затем использовать их позже в коде, чтобы удалить прослушиватели событий.

Сначала вы добавите такой класс:

function addClickEvents(){
  for (let i = 0; i < images.length; i++) {
    boxes[i].classList.add('boxes');// add class to the boxes
    boxes[i].addEventListener(
      "click",
      function () {
        addEvents(i);
      },
      { once: true }
    );
  }
}

Затем вы можете написать функцию сброса, например:

function resetGame() {
  document.querySelectorAll('.boxes').forEach((box)=>{
    box.outerHTML = box.outerHTML;// This will remove all event listeners
 })
}

Дополнительную информацию можно найти в этом ответе

0
Cybershadow 3 Май 2021 в 23:54