使用querySelectorAll时removeEventListener失效问题排查

问题根源 #

你代码里的事件监听无法移除，核心原因是**addEventListener和removeEventListener必须引用同一个函数才能生效**。

你绑定点击事件时用的是匿名箭头函数：

element.addEventListener('click', ()=>{
  insertMark(element);
});

而尝试移除的是insertMark函数：

event.removeEventListener("click", insertMark);

这两个不是同一个函数引用，浏览器找不到要移除的事件处理函数，所以移除操作无效。

解决方案1：直接绑定insertMark作为处理函数 #

调整代码，把insertMark直接作为事件处理函数传递，利用事件对象的target属性获取点击的元素：

const box = document.querySelectorAll(".box");

box.forEach((element) => {
  // 直接绑定insertMark，不需要匿名函数包装
  element.addEventListener('click', insertMark);
});

function insertMark(event) {
  // 通过event.target获取点击的方块元素
  const target = event.target;
  if (player === 1) {
    target.innerHTML = "X";
    player = 2;
  } else if (player === 2) {
    target.innerHTML = "O";
    player = 1;
  }
  target.classList.add("boxInsert");
  // 此时移除的和绑定的是同一个函数，生效
  target.removeEventListener("click", insertMark);
}

解决方案2：保存处理函数引用（需额外传参时用） #

如果需要在事件处理时传递额外参数，可以把处理函数的引用保存下来，确保移除时用同一个引用：

const box = document.querySelectorAll(".box");

box.forEach((element) => {
  // 定义处理函数并保存引用
  const clickHandler = () => {
    insertMark(element);
    // 移除时用保存的handler引用
    element.removeEventListener('click', clickHandler);
  };
  element.addEventListener('click', clickHandler);
});

function insertMark(element) {
  if (player === 1) {
    element.innerHTML = "X";
    player = 2;
  } else if (player === 2) {
    element.innerHTML = "O";
    player = 1;
  }
  element.classList.add("boxInsert");
}

内容的提问来源于stack exchange，提问作者Ibrahim Mansoor