触发一次后移除Window事件处理器失效问题求助

嘿，这个问题我之前帮好几个开发者排查过！你遇到的核心问题是事件绑定和解绑时用的不是同一个函数引用，再加上参数写法有误，才导致.off()失效的。

为什么你的代码解绑失败？ #

你绑定事件时用了匿名箭头函数：

$(window).on('keydown', (e)=>escape(e, tools)); 

这里的箭头函数是一个全新的匿名函数，它只是内部调用了escape，但它本身和escape函数完全不是同一个对象。而你解绑时写的：

$(window).off('keydown', $(window), escape); 

不仅多传了一个多余的$(window)参数（jQuery的.off()语法是.off(事件名 [, 选择器 ] [, 处理器函数])，这里不需要重复传元素），更关键的是你指定的escape函数和绑定的箭头函数不是同一个引用，jQuery根本找不到要解绑的事件，自然就没效果了。

两种靠谱的解决方案 #

方案1：存好事件处理器的引用

把绑定的箭头函数存成变量，这样绑定和解绑用同一个引用，jQuery就能精准定位了：

let tools = {}; 
// 先把事件处理器存为变量
const escapeHandler = (e) => escape(e, tools);

// 绑定这个变量对应的函数
$(window).on('keydown', escapeHandler); 

function escape(e, tools){ 
  if (e.which === 27){ 
    // 对tools执行相关操作
    $(window).off('keydown', escapeHandler); // 用同一个引用解绑，成功！
    alert('已触发提示，再次按ESC不会响应了。'); 
  } 
}

方案2：使用事件命名空间

如果不想存函数引用，可以给事件加个自定义命名空间，解绑时直接通过命名空间移除，更灵活：

let tools = {}; 
// 绑定事件时加上命名空间.escapeModule
$(window).on('keydown.escapeModule', (e)=>escape(e, tools)); 

function escape(e, tools){ 
  if (e.which === 27){ 
    // 对tools执行相关操作
    $(window).off('keydown.escapeModule'); // 移除该命名空间下的keydown事件
    alert('已触发提示，再次按ESC不会响应了。'); 
  } 
}

这种方式特别适合需要批量解绑某一类事件的场景，不用纠结函数引用的问题。

额外提醒 #

你之前尝试绑定到div元素遇到焦点问题，其实如果用全局window绑定是更合理的选择，因为ESC是全局快捷键，只要页面在前台就应该响应，而不需要元素获得焦点。

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