听众甚至在画布上也使用键？答案

【问题标题】：Listener consuming keys even off canvas?听众甚至在画布上也使用键？
【发布时间】：2013-09-21 14:58:17
【问题描述】：

我有一个我在画布上制作的游戏，它监听 w、a、d 和箭头键。但是，当我离开画布并单击画布下方的“单击此处订阅”按钮并尝试输入 w、a 或 d 时，他们不会输入。

我将 JQuery 用于按钮，将 HTML5 Canvas 用于游戏。

这是什么原因造成的，知道如何阻止它吗？有没有一种方法可以在单击按钮时停止侦听器并在单击时重新启动它 JQuery 屏幕是否关闭？

这里是：http://www.slimedrop.com

【问题讨论】：

标签： jquery html canvas keylistener

【解决方案1】：

听起来你正在监听整个窗口的关键事件。

您可以通过设置其标签索引来允许您的画布本身接收关键事件。

然后在画布上而不是在窗口上监听关键事件。

然后当用户将焦点转移到您的订阅表单时，画布键处理程序将不再接收键事件。

    // get a reference to the canvas
    var canvas=document.getElementById('canvas');

    // set canvas to be a tab stop (necessary to get keydown events)
    canvas.setAttribute('tabindex','0');

    // have handleKeydown handle keydown events on the canvas
    canvas.addEventListener('keydown',handleKeydown,false);

    // set focus to the canvas so keystrokes are immediately handled
    canvas.focus();

【讨论】：

我正在使用 document.body.onkeydown = function (e) {checkKeyDown(e);} 有没有办法让它成为画布而不是文档？
是的，上面的代码将让您处理来自画布的关键事件。只需设置 tabindex 并在画布上收听。 canvas.addEventListener('keydown',yourKeyDownHandler,false);