如何为包含键盘事件的命名函数绑定jQuery事件？

看起来你的点击触发弹窗/关闭弹窗功能都正常，但ESC键盘关闭弹窗的逻辑没生效，我帮你梳理几个常见问题点和修复方案：

首先先把你的代码整理出来方便排查：

// 定义的三个核心函数
var triggerWynPopup = function(e) { 
  // ... 你的弹窗显示逻辑
  e.preventDefault(); 
};
var closeWynPopup = function(e) { 
  // ... 你的弹窗隐藏逻辑
  e.preventDefault(); 
};
var closeWynPopupKeyb = function(e) { 
  if (e.keyCode === 27) { 
    closeWynPopup(); 
  } 
  e.preventDefault(); 
};

// 事件绑定逻辑
$btClose.on('click', closeWynPopup);
$wynPop.on('click', triggerWynPopup);
$document.on('keyup', closeWynPopupKeyb);

1. 修复事件对象传递问题 #

你在closeWynPopupKeyb里调用closeWynPopup()时没有传递事件对象，但closeWynPopup函数里依赖e.preventDefault()，如果没有传参，e会是undefined，可能导致报错中断执行。同时全局的e.preventDefault()会影响其他键盘操作（比如页面滚动、输入框打字），建议只在触发关闭时处理：

var closeWynPopupKeyb = function(e) { 
  if (e.keyCode === 27) { 
    closeWynPopup(e); // 传递事件对象给关闭函数
    e.preventDefault(); // 仅在ESC触发时阻止默认行为
  } 
};

2. 改用更现代的键盘事件判断方式 #

keyCode已经被官方废弃，推荐使用e.key === 'Escape'来判断ESC键，兼容性更好：

var closeWynPopupKeyb = function(e) { 
  if (e.key === 'Escape') { 
    closeWynPopup(e); 
    e.preventDefault();
  } 
};

3. 确认事件绑定的元素正确性 #

确保$document是正确的jQuery对象，比如应该是$(document)。如果你的变量定义有误，事件根本不会绑定到正确的元素上，可以在控制台打印$document确认是否指向document对象。

4. 优化焦点捕获逻辑（可选） #

如果弹窗打开后焦点集中在弹窗内的元素，可能导致键盘事件无法冒泡到document，这时可以直接给弹窗元素绑定keyup事件，逻辑更精准：

$wynPop.on('keyup', closeWynPopupKeyb);

修复后的完整代码示例 #

var triggerWynPopup = function(e) { 
  // ... 你的弹窗显示逻辑
  e.preventDefault(); 
};
var closeWynPopup = function(e) { 
  // ... 你的弹窗隐藏逻辑
  if (e) e.preventDefault(); // 增加判断，避免无事件对象时报错
};
var closeWynPopupKeyb = function(e) { 
  if (e.key === 'Escape') { 
    closeWynPopup(e); 
    e.preventDefault();
  } 
};

// 事件绑定
$btClose.on('click', closeWynPopup);
$wynPop.on('click', triggerWynPopup);
$(document).on('keyup', closeWynPopupKeyb); // 确保绑定到正确的document对象

调整后，ESC键关闭弹窗的功能应该就能正常工作了。

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