代码中调用removeEventListener无法正常移除keydown事件监听器的问题咨询

不存在removeEventListener方法本身失效的问题，所有异常都是代码逻辑顺序错误导致的，具体问题点：

• 解绑代码位置完全错位
  你把document.removeEventListener('keydown', 对应ESC回调)写在了按键判断的外部，相当于只要触发任意一次keydown事件，不管按的是哪个键，都会直接把ESC监听器卸载。比如弹窗刚弹出，用户随手按了个输入法切换键、字母键，触发一次keydown就把监听器删了，之后再按ESC的时候，根本没有对应的监听器存在，自然不会执行关闭弹窗的逻辑，看起来就像“移除操作没生效”。
• 缺少弹窗存在性的前置校验
  哪怕当前页面没有success/error弹窗，只要敲一次键盘就会执行解绑操作，完全不符合“弹窗存在时才响应ESC、关闭弹窗后再解绑”的预期。另外你原来用mainPage.lastChild.className判断弹窗存在的逻辑也有隐患，如果弹窗挂载后页面又新增了其他DOM节点，lastChild就会变成新的节点，判断直接失效，直接通过类名查找对应元素判断存在性更稳妥。
• error弹窗分支漏了解绑逻辑
  错误弹窗的自定义关闭按钮点击后，只移除了DOM节点，没有同步删掉绑定在document上的click、keydown监听器，后续重复弹出弹窗时会出现监听器堆积，进一步导致ESC响应异常。
• 按键判断存在兼容性问题
  使用已废弃的evt.keyCode === 27判断ESC按键，在部分新版浏览器、特殊输入环境下会出现识别偏差，优先用evt.key === 'Escape'替代稳定性更好。

修正思路 #

把解绑监听器的逻辑，挪到“确认按下ESC、确认目标弹窗存在、完成弹窗移除”的分支内部，确保只有真的触发了关闭弹窗的操作，才执行解绑；不满足条件的按键事件直接跳过，保留监听器等待下一次交互。

修正后的成功弹窗ESC回调示例：

const successEscListenerAdd = (evt) => {
  // 非ESC按键直接返回，不做任何操作
  if (evt.key !== 'Escape') return;
  // 页面没有success弹窗直接返回
  const successEl = document.querySelector('.success');
  if (!successEl) return;
  // 满足关闭条件再操作DOM、解绑监听器
  successEl.remove();
  document.removeEventListener('keydown', successEscListenerAdd);
}

错误弹窗的ESC回调按照同样逻辑调整即可，另外在错误弹窗的按钮点击回调里，也要同步执行对应的监听器解绑操作，避免内存泄漏。

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