嵌套Event Listener未完全移除：仅单个box监听器被清除

问题核心在于你之前只移除了触发事件的那个格子的监听器，而没有遍历所有.emptysqr元素统一移除。下面是具体的解决思路和代码实现：

核心思路 #

1. 统一管理所有空格子的事件绑定与移除，避免只操作单个元素
2. 每次添加新监听器前，先清空旧的，防止重复绑定导致多次触发
3. 触发handleBoardClick后，立即遍历所有空格子移除监听器，确保操作序列仅执行一次

代码实现（静态棋盘场景） #

如果棋盘格子不会动态增减，可提前缓存空格子集合：

// 提前获取所有空格子，减少DOM查询次数
const emptySquares = document.querySelectorAll('.emptysqr');

// 棋盘格子点击处理函数
function handleBoardClick(e) {
    // 第一步就移除所有空格子的监听器，确保操作只执行一次
    removeAllBoardClickListeners();

    // 这里编写你的棋子移动等业务逻辑
    const targetSquare = e.target;
    // ... 你的具体业务代码
}

// 统一移除所有空格子的点击监听器
function removeAllBoardClickListeners() {
    emptySquares.forEach(square => {
        square.removeEventListener('click', handleBoardClick);
    });
}

// 棋子选中事件
document.querySelector('.selectedPiece').addEventListener('click', () => {
    // 先清空旧监听器，防止重复绑定
    removeAllBoardClickListeners();
    // 给所有空格子添加新的点击监听器
    emptySquares.forEach(square => {
        square.addEventListener('click', handleBoardClick);
    });
});

动态棋盘场景适配 #

如果下棋过程中，.emptysqr类会动态变化（比如棋子移动后格子状态改变），则需要每次操作都重新查询最新的空格子：

function handleBoardClick(e) {
    removeAllBoardClickListeners();

    // 业务逻辑
    const targetSquare = e.target;
    // ...
}

function removeAllBoardClickListeners() {
    // 每次都查询当前所有空格子
    document.querySelectorAll('.emptysqr').forEach(square => {
        square.removeEventListener('click', handleBoardClick);
    });
}

document.querySelector('.selectedPiece').addEventListener('click', () => {
    removeAllBoardClickListeners();
    // 给最新的空格子添加监听器
    document.querySelectorAll('.emptysqr').forEach(square => {
        square.addEventListener('click', handleBoardClick);
    });
});

为什么之前的方法无效？ #

你之前的操作只对触发事件的e.target调用了removeEventListener，所以只有被点击的那个格子的监听器被移除，其他空格子的监听器依然存在。通过遍历所有.emptysqr元素统一移除，才能彻底清空所有相关监听器。

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