当前位置：首页 > JavaScript

js 实现esc

2026-02-01 22:07:41JavaScript

监听键盘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中的实现

在框架中使用时需要注意组件卸载时的清理：

js 实现esc

React示例：

useEffect(() => {
  const handleEsc = (event) => {
    if (event.key === 'Escape') {
      closeModal();
    }
  };
  window.addEventListener('keydown', handleEsc);
  return () => window.removeEventListener('keydown', handleEsc);
}, []);

Vue示例：

js 实现esc

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) {
    // 兼容处理
  }
};