如何移除keydown事件监听器？iframe小程序关闭时恢复键盘功能

核心问题分析 #

你当前的代码用匿名函数绑定了keydown事件，而removeEventListener要求必须传入和绑定阶段完全相同的函数引用才能移除监听，这就是无法直接撤销的原因。下面分两种场景给出解决方法：

场景1：可以修改iframe内部的代码 #

直接重构原代码，将匿名事件处理函数改为命名函数，方便后续引用移除：

第一步：重构事件绑定代码

替换原有的匿名函数绑定逻辑（同时修正了原代码里的拼写错误："Insert," → "Insert"，"ContextM,nu" → "ContextMenu"）：

// 定义可复用的命名处理函数
function blockKeydown(e) {
  const blockedKeys = [
    "Backspace","Tab","Enter","ShiftLeft","ShiftRight","ControlLeft","ControlRight",
    "AltLeft","AltRight","Pause","CapsLock","Escape","Space","PageUp","PageDown",
    "End","Home","ArrowLeft","ArrowUp","ArrowRight","ArrowDown","PrintScreen",
    "Insert","Delete","Digit0","Digit1","Digit2","Digit3","Digit4","Digit5",
    "Digit6","Digit7","Digit8","Digit9","KeyA","KeyB","KeyC","KeyD","KeyE",
    "KeyF","KeyG","KeyH","KeyI","KeyJ","KeyK","KeyL","KeyM","KeyN","KeyO",
    "KeyP","KeyQ","KeyR","KeyS","KeyT","KeyU","KeyV","KeyW","KeyX","KeyY",
    "KeyZ","MetaLeft","MetaRight","ContextMenu","Numpad0","Numpad1","Numpad2",
    "Numpad3","Numpad4","Numpad5","Numpad6","Numpad7","Numpad8","Numpad9",
    "NumpadMultiply","NumpadAdd","NumpadSubtract","NumpadDecimal","NumpadDivide",
    "F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12",
    "NumLock","ScrollLock","Semicolon","Equal","Comma","Minus","Period",
    "Slash","Backquote","BracketLeft","Backslash","BracketRight","Quote"
  ];
  if (blockedKeys.indexOf(e.code) > -1) {
    e.preventDefault();
  }
}

// 绑定事件（保持第三个参数为false，和移除时一致）
window.addEventListener("keydown", blockKeydown, false);

第二步：关闭小程序时移除监听

在设置iframe为display:none的逻辑中，添加移除事件的代码：

// 移除keydown事件监听
window.removeEventListener("keydown", blockKeydown, false);

场景2：无法修改iframe内部代码（第三方小程序） #

如果无法改动iframe的代码，可以利用事件捕获阶段的优先级，在父页面添加一个更早执行的监听，拦截事件并阻止iframe内的监听生效：

关闭小程序时恢复键盘行为

// 定义恢复默认行为的函数
function restoreKeydown(e) {
  e.stopImmediatePropagation(); // 阻止后续的事件监听执行
}

// 用捕获阶段绑定（第三个参数设为true），确保先于iframe内的监听触发
window.addEventListener("keydown", restoreKeydown, true);

再次打开小程序时撤销恢复逻辑

如果需要重新启用小程序的键盘拦截，记得移除这个恢复监听：

window.removeEventListener("keydown", restoreKeydown, true);

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