React函数组件中document.removeEventListener移除事件监听器不生效问题

核心原因 #

移除事件监听器要求 removeEventListener 的入参必须和绑定时的addEventListener入参完全一致，你的代码存在两个典型错误：

1. 部分移除调用未传递捕获模式参数
   你绑定事件时明确指定了第三个捕获参数为true：

document.addEventListener('keypress', BoxkeypressHandler, true);

但在BoxkeypressHandler内部的移除调用没有携带第三个参数，和绑定时参数不匹配，无法命中要移除的事件：

// 错误写法
document.removeEventListener('keypress', BoxkeypressHandler);

2. 事件处理函数引用不稳定（框架场景常见）
   如果你是在React/Vue这类有重渲染机制的框架中编写的这段代码，const BoxkeypressHandler = (e) => {} 写法会在每次组件重渲染时生成全新的函数引用，导致移除时传入的函数和绑定时的函数不是同一个引用，自然无法匹配到已绑定的事件。

修复方案 #

• 统一所有移除调用的参数，和绑定逻辑保持完全一致：

document.removeEventListener('keypress', BoxkeypressHandler, true);

• 框架场景下稳定函数引用：以React为例，使用useCallback包裹处理函数，确保重渲染时引用不变：

const BoxkeypressHandler = useCallback((e) => {
  // 原有处理逻辑不变
}, [/* 填写函数内部用到的所有外部依赖 */])

• 补充绑定/移除的防护逻辑，避免重复绑定：可以用一个标记变量记录当前是否已经绑定了事件，只有未绑定时才执行添加操作，只有已绑定时才执行移除操作，避免同个事件被绑定多次后只移除一次的问题。

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