当前位置：首页 > JavaScript

js实现esc功能

2026-03-16 07:30:20JavaScript

实现ESC键功能的方法

在JavaScript中，可以通过监听键盘事件来检测ESC键的按下。ESC键的键码是27，可以使用keydown或keyup事件来捕获。

document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape' || event.keyCode === 27) {
        // ESC键被按下时的操作
        console.log('ESC pressed');
    }
});

使用事件委托优化

如果需要在特定元素上监听ESC键，可以使用事件委托的方式，避免直接在全局监听。

const element = document.getElementById('targetElement');
element.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        // 执行关闭或取消操作
        event.target.blur(); // 例如取消焦点
    }
});

结合模态框或弹窗

ESC键常用于关闭模态框或弹窗。以下是一个简单的实现示例：

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

兼容性处理

为了兼容旧版浏览器，可以同时检查key和keyCode属性。

document.addEventListener('keydown', function(event) {
    const isEsc = (event.key || event.keyCode) === ('Escape' || 27);
    if (isEsc) {
        // 执行操作
    }
});

移除事件监听

如果需要在特定条件下停止监听ESC键，可以移除事件监听器。

js实现esc功能

function handleEsc(event) {
    if (event.key === 'Escape') {
        console.log('ESC pressed');
        document.removeEventListener('keydown', handleEsc);
    }
}
document.addEventListener('keydown', handleEsc);

以上方法可以根据实际需求灵活调整，适用于大多数需要ESC键功能的场景。