Javascript 什么'；在HTML5画布中创建关键事件的最佳方式是什么？

请建议为HTML5画布创建关键事件的最佳方法。我不喜欢任何图书馆，但如果你认为这是最好的方式，那就去回答吧。提前谢谢

我正在编写一个画布游戏，我使用默认的

.addEventListener

，并通过它附带的

事件.keyCode

进行切换。此外，我不侦听Canvas元素本身上的关键事件，而只是将侦听器设置为窗口

window.addEventListener('keyup',keyUpListener,false);
window.addEventListener('keydown',keyDownListener,false); 

---

这将返回密钥代码：

<canvas id="myCanvas" width="200" height="100" style="background:green"></canvas>
<script type="text/javascript">
window.addEventListener('keydown',this.check,false);

function check(e) {
    alert(e.keyCode);
}
</script>

或者，如果您有一长串要使用的钥匙，请在开关盒中使用：

function check(e) {
    var code = e.keyCode;
    switch (code) {
        case 37: alert("Left"); break; //Left key
        case 38: alert("Up"); break; //Up key
        case 39: alert("Right"); break; //Right key
        case 40: alert("Down"); break; //Down key
        default: alert(code); //Everything else
    }
}

---

如果要在

本身（而不是

窗口

或

文档

）上设置键事件处理，请在

元素上设置一个tabindex。请注意，画布需要聚焦于捕捉关键事件

<script>
    document.getElementById('game').addEventListener('keypress', handleKeyPress);
    function handleKeyPress(e) { ... }
</script>
<canvas id="game" tabindex="1" width="350" height="200">
</canvas>

document.getElementById（'game'）。addEventListener（'keypress'，handleKeyPress）；
功能手柄按键（e）{…}

网站上就是这样做的

---

如果您不想在单击画布时显示边框，请将其样式设置为

outline:none

是否只想在按下键（如“W”）时执行特定功能？在我的visual js游戏引擎中，我实现了画布面向对象事件。画布应用程序的虚拟键盘在哪里：你应该重新命名这个问题。您想要创建的似乎不是事件，而是一个EventHandler，它根据事件触发操作（此处的所有响应都隐式地描述为用户通过键盘生成）。您可以使用向上箭头（38）发出警报吗。谢谢。与窗口活动合作是个好主意吗？如果有人想在你的游戏之外但在同一窗口中做一些事情，比如写评论，该怎么办？@erikb85在这种情况下，当用户关注输入区域时，你可能需要禁用事件侦听器。谢谢。你能只绑一把钥匙吗？向上箭头示例。对不起，新问题。只听那把钥匙？遗憾的是，没有。如果关键代码与38匹配，您最好检查其关键代码：做任何事情，如果不匹配：什么也不做。只想说明一下，如果您有多个画布，您将需要将事件绑定到特定画布。在画布元素上设置tabindex允许它在聚焦时接受keyevents。请注意，通常使用keyup而不是keydown会更好-更稳定。如何设置选项卡索引？@ncmathsadist by'set'我的意思是，将html属性'tabindex'添加到

画布

标记中，并给它一个整数值。TabIndex本身不属于此问题的范围：

<script>
    document.getElementById('game').addEventListener('keypress', handleKeyPress);
    function handleKeyPress(e) { ... }
</script>
<canvas id="game" tabindex="1" width="350" height="200">
</canvas>