javascript – htKeyUp事件未针对某些键触发

2023年3月31日 177次阅读

我正在研究
HTML5
Javascript 2D游戏.我需要处理用户输入以在画布上移动角色.我写了一段代码来处理“按键”状态.

const PRESSED = 1;
const RELEASED = 0;

const UP = 90;
const DOWN = 83;
const LEFT = 81;
const RIGHT = 68;

['keyup', 'keydown'].forEach(eventName => {
    window.addEventListener(eventName, function(e){
    e.preventDefault();
    const keyState = e.type === 'keydown' ? PRESSED : RELEASED;
    const keyCode = e.keyCode;

  if(keyCode === UP){
    player.go.dirY = keyState === PRESSED ? "UP" : "STOP"
  } else if(keyCode === DOWN){
    player.go.dirY = keyState === PRESSED ? "DOWN" : "STOP"
  } else if(keyCode === LEFT){
    player.go.dirX = keyState === PRESSED ? "LEFT" : "STOP"
  } else if(keyCode === RIGHT){
    player.go.dirX = keyState === PRESSED ? "RIGHT" : "STOP"
  }
});
});

问题是当我释放keyUp时,某些键不会触发keyUp事件,因此它会创建一个键阻塞效果,并且播放器会继续移动.它适用于KeyW和KeyD,但不适用于KeyA和KeyS.我也尝试使用箭头键,当我释放它时,ArrowUp和ArrowRight会触发keyUp但不会触发ArrowLeft和ArrowDown.

我在某处读到这是一个老bug,它与操作系统和浏览器有关.我使用的是Ubuntu 16.10和Chrome版本68.0.3440.84(64位).但我找不到任何解决办法.有些人在没有显示任何演示的情况下使用setTimout或setInterval讨论了一种解决方法.我不知道如何让它工作,但我不能让玩家的动作取决于操作系统和浏览器……

我希望有人能帮我找到解决方案.
谢谢 ！

[编辑]我只是通过“document.addEventListener(…)”替换“window.addEventListener(…)”来解决问题.

最佳答案 我只是通过“document.addEventListener(…)”替换“window.addEventListener(…)”来解决问题.

点赞