js 实现esc
监听键盘ESC键事件
在JavaScript中监听ESC键可以通过keydown或keyup事件实现。ESC键的键码是27，现代浏览器也支持key属性直接判断按键名称。
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape' || event.keyCode === 27) {
console.log('ESC键被按下');
// 执行关闭模态框、退出全屏等操作
}
});移除ESC事件监听器
如果需要动态取消监听，需使用命名函数而非匿名函数：
function handleEsc(event) {
if (event.key === 'Escape') {
console.log('ESC触发');
}
}
// 添加监听
document.addEventListener('keydown', handleEsc);
// 移除监听
document.removeEventListener('keydown', handleEsc);React/Vue中的实现
在框架中使用时需要注意组件卸载时的清理：
React示例：
useEffect(() => {
const handleEsc = (event) => {
if (event.key === 'Escape') {
closeModal();
}
};
window.addEventListener('keydown', handleEsc);
return () => window.removeEventListener('keydown', handleEsc);
}, []);Vue示例：
mounted() {
window.addEventListener('keydown', this.handleEsc);
},
beforeUnmount() {
window.removeEventListener('keydown', this.handleEsc);
},
methods: {
handleEsc(event) {
if (event.key === 'Escape') {
this.$emit('close');
}
}
}浏览器兼容性处理
对于老旧浏览器可结合keyCode和which属性：
document.onkeydown = function(event) {
event = event || window.event;
const key = event.key || event.keyCode;
if (key === 'Escape' || key === 27) {
// 兼容处理
}
};实际应用场景
- 关闭模态框：检测ESC键关闭弹出的对话框
- 退出全屏模式：与
document.exitFullscreen()配合使用 - 取消操作：在表单编辑等场景中提供快捷取消方式
注意事项：
- 避免在同一个页面多次绑定相同事件
- 全屏API在某些浏览器需要特定权限
- 移动端设备通常没有物理ESC键
