当前位置：首页 > JavaScript

js实现按键

2026-03-14 12:16:17JavaScript

实现按键检测的方法

在JavaScript中检测按键可以通过监听键盘事件来实现。以下是几种常见的实现方式：

js实现按键

监听keydown事件

document.addEventListener('keydown', function(event) {
    console.log('按键代码:', event.keyCode);
    console.log('按键名称:', event.key);
});

监听keyup事件

document.addEventListener('keyup', function(event) {
    if(event.key === 'Enter') {
        console.log('回车键被释放');
    }
});

监听特定按键

document.addEventListener('keydown', function(event) {
    if(event.ctrlKey && event.key === 's') {
        event.preventDefault();
        console.log('Ctrl+S被按下');
    }
});

常用按键属性

event.key: 返回按键的字符串表示(如"Enter", "a", "Shift"等)
event.code: 返回物理按键代码(如"KeyA", "Space", "ArrowLeft"等)
event.keyCode: 返回按键的ASCII码(已废弃，不建议使用)
event.ctrlKey, event.shiftKey, event.altKey, event.metaKey: 返回修饰键是否被按下

阻止默认行为

某些按键有默认行为(如空格键滚动页面)，可以通过event.preventDefault()阻止：

js实现按键

document.addEventListener('keydown', function(event) {
    if(event.key === ' ') {
        event.preventDefault();
        console.log('空格键按下，默认行为已阻止');
    }
});

游戏开发中的连续按键检测

对于需要连续检测按键的游戏场景，可以记录按键状态：

const keys = {};

window.addEventListener('keydown', (e) => {
    keys[e.key] = true;
});

window.addEventListener('keyup', (e) => {
    keys[e.key] = false;
});

function gameLoop() {
    if(keys['ArrowRight']) {
        // 向右移动
    }
    if(keys['ArrowLeft']) {
        // 向左移动
    }
    requestAnimationFrame(gameLoop);
}
gameLoop();