时间戳

首页 > 解决方案 > 如果我的事件是通过 for 循环添加的，我该如何使用 removeClickEvents？[javascript]

javascript - 如果我的事件是通过 for 循环添加的，我该如何使用 removeClickEvents？[javascript]

问题描述

我正在创建一个井字游戏，在其中添加事件侦听器以检查是否单击了框。这是我用来向页面上的元素添加点击事件的函数：

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";
}

我想删除这些事件，以便在游戏重置后不会重叠它们。我在重置游戏的页面上有一个单独的按钮。无论如何使用该按钮删除 eventListeners 吗？我使用了一个看起来像这样但它似乎不起作用的函数：

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

我也尝试将函数附加到变量并以这种方式添加，但据我所知，这不起作用，因为我需要将变量传递给函数。

标签： javascriptloopsaddeventlistenerremoveeventlistener

解决方案

您可以尝试向您的框元素添加一个公共类，然后稍后在代码中使用它们来删除事件侦听器。

首先，您将添加如下类：

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
 })
}

有关更多信息，您可以查看 此答案

推荐阅读