当前位置：首页 > JavaScript

js 实现esc

2026-03-14 21:26:52JavaScript

监听键盘事件

在JavaScript中，可以通过监听键盘事件来检测ESC键的按下。使用keydown或keyup事件，检查事件的key属性是否为"Escape"。

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    console.log('ESC键被按下');
    // 执行相关操作
  }
});

使用keyCode（兼容旧浏览器）

对于需要兼容旧浏览器的场景，可以使用keyCode属性。ESC键的keyCode值为27。

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 27) {
    console.log('ESC键被按下');
    // 执行相关操作
  }
});

结合事件委托

如果需要为动态生成的元素绑定ESC键事件，可以使用事件委托，将事件监听器绑定到父元素上。

document.body.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    console.log('ESC键被按下');
    // 执行相关操作
  }
});

防止事件冒泡

在某些情况下，可能需要阻止ESC键事件的默认行为或冒泡。

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    event.preventDefault();
    event.stopPropagation();
    console.log('ESC键被按下，并阻止默认行为');
  }
});

结合模态框关闭

ESC键常用于关闭模态框或弹出窗口。以下是一个示例：

const modal = document.getElementById('modal');

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape' && modal.style.display === 'block') {
    modal.style.display = 'none';
  }
});

使用事件移除

如果需要临时禁用ESC键功能，可以移除事件监听器。

js 实现esc

function handleEsc(event) {
  if (event.key === 'Escape') {
    console.log('ESC键被按下');
  }
}

document.addEventListener('keydown', handleEsc);

// 移除事件监听器
document.removeEventListener('keydown', handleEsc);