当前位置：首页 > JavaScript

js实现按键

2026-02-01 13:24:27JavaScript

监听键盘事件

在JavaScript中，可以通过addEventListener监听键盘事件。常用的事件类型包括keydown、keyup和keypress。keydown在按键按下时触发，keyup在按键释放时触发，keypress在按键按下并产生字符时触发。

document.addEventListener('keydown', function(event) {
  console.log('按键按下:', event.key);
});

document.addEventListener('keyup', function(event) {
  console.log('按键释放:', event.key);
});

获取按键信息

事件对象event包含按键的详细信息：

js实现按键

event.key：返回按键的字符串表示（如"a"、"Enter"）。
event.code：返回物理按键的代码（如"KeyA"、"Enter"）。
event.which或event.keyCode：返回按键的ASCII码（已废弃，但部分旧代码仍在使用）。

document.addEventListener('keydown', function(event) {
  console.log('按键:', event.key);
  console.log('物理按键代码:', event.code);
  console.log('ASCII码:', event.keyCode);
});

阻止默认行为

某些按键会触发浏览器的默认行为（如空格键滚动页面）。可以通过event.preventDefault()阻止默认行为。

js实现按键

document.addEventListener('keydown', function(event) {
  if (event.key === ' ') {
    event.preventDefault();
    console.log('空格键被阻止');
  }
});

组合键检测

通过检查event.ctrlKey、event.shiftKey、event.altKey和event.metaKey，可以检测是否按下了组合键。

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

游戏开发中的连续按键

在游戏开发中，通常需要检测按键的持续按下状态。可以通过维护一个对象来记录按键状态。

const keys = {};

document.addEventListener('keydown', function(event) {
  keys[event.key] = true;
});

document.addEventListener('keyup', function(event) {
  keys[event.key] = false;
});

function gameLoop() {
  if (keys['ArrowUp']) {
    console.log('向上移动');
  }
  requestAnimationFrame(gameLoop);
}

gameLoop();