移除HTML元素列表的事件监听器失败，寻求解决方法

算力阿峰

2026-5-25

解决removeEventListener无法移除元素列表事件监听器的问题

我一眼就看出问题所在啦——你在添加和移除事件监听器的时候用的是匿名函数，这可是removeEventListener失效的头号元凶！

问题根源

每次调用addEventListener时传入的匿名函数（比如function(e){ cardChecker(e); }）都是一个全新的函数对象，和你后来在removeEventListener里传入的匿名函数不是同一个引用。removeEventListener需要找到完全匹配的函数引用才能移除，所以自然失效了。

解决方案：使用命名函数

把事件处理逻辑抽成一个独立的命名函数，这样添加和移除时用的是同一个函数引用，就能成功移除了。同时注意：

保持addEventListener和removeEventListener的第三个参数（捕获/冒泡模式）一致（你代码里用了true，移除时也要传true）
循环里尽量用let代替var，避免变量作用域导致的意外问题

修改后的代码示例

// 先定义独立的命名处理函数
function handleCardClick(e) {
  e.preventDefault();
  cardChecker(e);
  if (moves > 2) {
    if (moves > 4) {
      moveHTML.previousElementSibling.innerHTML = '<p>&#...';
      // 这里补全你原来的代码逻辑
    }
  }
}

// 添加事件监听器
if (moveChecker !== 8) {
  for (let i = 0; i < card.length; i++) { // 用let避免循环作用域问题
    card[i].addEventListener('click', handleCardClick, true);
  }
} 
// 移除事件监听器
else {
  for (let i = 0; i < card.length; i++) {
    card[i].removeEventListener('click', handleCardClick, true);
  }
}