Javascript“按键”事件不起作用

Question

我是JavaScript新手，使用“ keypress”事件时遇到了问题； 我目前正在做一个小的跳跃脚本测试，并且“ keydown”和“ keyup”事件都可以，但是“ keypress”不起作用（我在事件发生后立即尝试使用console.log（）进行调试，但是在按下时没有任何显示关键）。

这是我的window.onload函数（在其中添加事件监听器）：

 window.onload = function() { canvas = document.getElementById('gameCanvas'); ctx = canvas.getContext('2d'); init(); setInterval(function() { tick(); render(); }, 1000/FPS ); // listeners window.addEventListener("keypress", function(evt) { if (evt.defaultPrevented) { return; } switch(evt.keyCode) { case 38: player.jump(); break; default: return; } } ); window.addEventListener("keydown", function(evt) { if (evt.defaultPrevented) { return; } switch(evt.keyCode) { case 37: player.moveLeft(); break; case 39: player.moveRight(); break; default: return; } } ); window.addEventListener("keyup", function(evt) { if (evt.defaultPrevented) { return; } switch(evt.keyCode) { case 37: case 39: player.stop(); break; default: return; } } ); } 

感谢您的帮助！

Answer 1

keypress事件涉及通过按下某个键产生的实际输入，而不是“按下”该键的实际物理过程。

我从您的代码中得出您对箭头键感兴趣的信息。 由于箭头键不会产生任何类型的字符，因此它们不会触发keypress事件。 keydown和keyup事件是您要使用的事件。

另外一个最后请注意：即使是对于同时触发键keydown和keypress事件的keyCode / which性能通常是两个事件之间的不同，又因为一个涉及实际的密钥和其他问题所产生的输入。 不推荐使用keyCode和keyCode ， which实际上都赞成使用抽象的key字符串属性，该属性消除了不同事件之间的这种不一致。

Answer 2

游戏输入

始终最好将输入与游戏隔离。 游戏通常使用规则循环进行动画处理。 键盘/鼠标/触摸以及可以用作控制设备的任何其他设备都是断断续续的，并且设备之间的发射速率不同。

您需要知道的是游戏循环每一帧的输入设备的当前状态。 这样，所有输入事件应该做的就是收集设备状态信息。

键盘状态监听器

键盘状态侦听器将仅记录您感兴趣和/或希望阻止其默认行为的键的状态。 可以根据需要打开和关闭它。

不幸的是，并非所有浏览器都使用新的code属性，但是不支持该code属性将意味着将来某个时候，当keyCode折旧的keyCode属性时，您的密钥处理程序将中断。 因此，现在我们必须处理这两个系统。 下面的代码将keyCode值映射到code名称。

const keyboard = (() => {
    var active = false;
    const keys = {
        ArrowLeft : false,  // only add keys you are interested in
        ArrowRight : false,
        Space : false,
        anyKey : false,
    };
    // map keyCodes to named code.
    const keyCodeMap = {
         k37 : "ArrowLeft",
         k39 : "ArrowRight",
         k32 : "Space",
    };
    function keyEvents (e) {
        var code = e.code;
        if (! code) { // if no support for code
            code = keyCodeMap["k" + e.keyCode];
        }  
        if (keys[code] !== undefined) {
            keys[code] = event.type === "keydown";
            e.preventDefault();
        }
        keys.anyKey = true;
    }
    const API = {
        start () {
            if (!active) {
                addEventListener("keyup", keyEvents);
                addEventListener("keydown", keyEvents);
                active = true;
            }
            return keys;
        },
        stop () {
            if (active) {
                removeEventListener("keyup", keyEvents);
                removeEventListener("keydown", keyEvents);
                active = false;
             }
        }
    }
    return API;
})();

启动和停止键盘

// Starting. Returns a keys state object. This is always the same object
const keys = keyboard.start(); // creates listeners

// stopping
keyboard.stop(); // removes listeners

在您的主游戏循环中使用

function mainLoop (time) {
    // check keyboard state and take action if needed
    // do rest of game
    requestAnimationFrame(mainLoop);
}

仅在一个或多个键按下时移动

if (keys.ArrowRight) { moveRight() }
if (keys.ArrowLeft)  { moveLeft()  }

只执行一次动作

if (keys.Space) { // note holding down the key will repeat     
    keys.Space = false; // reset the key
    jumpAction();
}

检查是否已按下任何键

if (keys.anyKey) {
    // reset the key
    keys.anyKey = false;
    startGame();
}