游戏开发中无法动态移除div点击事件监听器的问题

你用removeEventListener没效果的核心原因是：每次添加和移除的都是不同的匿名函数。箭头函数(e) => { clic(e, v, k) }每次执行都会生成新的函数实例，removeEventListener找不到和添加时完全一致的函数引用，自然没法完成移除操作。

方案1：使用具名处理函数 #

把点击事件的处理函数抽成具名函数，让添加和移除时复用同一个函数引用：

let Divs = document.querySelectorAll(".data")

// 定义具名的点击处理函数
function handleClick(e) {
  const div = e.target;
  console.log("CLICK");
  // 移除同一个具名函数
  div.removeEventListener("click", handleClick);
}

Divs.forEach(v => {
  v.addEventListener("click", handleClick);
});

方案2：用once选项（最简洁） #

如果只需要让事件触发一次，直接在添加监听器时设置{once: true}，浏览器会自动在事件触发后移除监听器：

let Divs = document.querySelectorAll(".data")

Divs.forEach((v, k) => {
  v.addEventListener("click", (e) => {
    clic(e, v, k);
  }, { once: true }); // 加上这个配置
});

function clic(e, v, k) {
  console.log("CLICK");
  // 无需手动调用removeEventListener，浏览器自动处理
}

方案3：禁用元素/添加阻止点击的类 #

游戏场景里还可以直接给点击后的div加状态标记，阻止后续点击：

let Divs = document.querySelectorAll(".data")

Divs.forEach((v, k) => {
  v.addEventListener("click", (e) => {
    // 先判断是否已经被点击过
    if (v.classList.contains("clicked")) return;
    
    clic(e, v, k);
    // 添加标记类，同时设置pointer-events:none阻止后续点击
    v.classList.add("clicked");
    v.style.pointerEvents = "none";
  });
});

function clic(e, v, k) {
  console.log("CLICK");
}

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