如何停止由onclick触发的mouseover事件监听器实现的单元格着色功能？

问题根源 #

你之前用return和removeEventListener无效的核心原因：

• 绑定mouseover的是匿名函数，removeEventListener需要完全一致的函数引用才能生效，匿名函数无法满足这个要求。
• 缺少状态变量控制着色的开启/关闭，事件移除逻辑也没和点击触发时机对应。

修改后的完整代码 #

HTML

<section id="container"></section>

JavaScript

// 定义网格尺寸，可自行调整
const gridSize = 16;
// 着色状态开关：true允许着色，false停止
let isColoring = false;
const container = document.getElementById('container');

// 生成网格结构
container.innerHTML = 
  `<section class="row">${'<div class="cell"></div>'.repeat(gridSize)}</section>`
  .repeat(gridSize);

// 抽离具名的着色处理函数，方便后续控制
function colorCellOnHover(e) {
  if (isColoring) {
    e.target.style.background = 'black';
  }
}

// 为所有单元格绑定事件
const cells = document.querySelectorAll('.cell');
cells.forEach(cell => {
  // 点击单元格切换着色状态
  cell.addEventListener('click', () => {
    isColoring = !isColoring;
  });
  // 绑定鼠标悬停着色事件
  cell.addEventListener('mouseover', colorCellOnHover);
});

代码说明 #

1. 状态开关isColoring：通过布尔值控制悬停时是否执行着色逻辑，点击单元格直接切换状态，比移除事件更灵活。
2. 具名处理函数：把原匿名函数抽成colorCellOnHover，既方便维护，也可以在需要彻底关闭功能时，用removeEventListener('mouseover', colorCellOnHover)移除事件。
3. 事件绑定优化：放弃HTML的onclick属性绑定，直接用JS统一处理所有单元格的点击和悬停事件，逻辑更集中，避免全局函数污染。

可选需求适配：点击一次开启，再点击永久停止 #

如果需要“首次点击开启着色，再次点击任意单元格就彻底停止”，可以修改点击事件逻辑：

cell.addEventListener('click', () => {
  if (!isColoring) {
    isColoring = true;
  } else {
    isColoring = false;
    // 彻底移除所有悬停事件，关闭着色功能
    cells.forEach(c => c.removeEventListener('mouseover', colorCellOnHover));
  }
});

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