如何在 KineticJS 管理的 HTML5-Canvas 中收听 Keydown-Events？答案

【问题标题】：How to listen to Keydown-Events in a KineticJS-managed HTML5-Canvas?如何在 KineticJS 管理的 HTML5-Canvas 中收听 Keydown-Events？
【发布时间】：2012-08-30 04:45:24
【问题描述】：

我正在尝试将事件侦听器添加到由Kineticjs 管理的 Htm5-Canvas（Canvas 是通过 KineticJS 的 Stage 创建的）。

我尝试过（使用 jQuery）：

$(选择器).keydown( function(e) {... } )

使用以下选择器：

window（它正在工作，但它正在监听整个 Window，因此效果不佳）
所有画布元素 $('canvas')
嵌入 KineticJS 及其 Canvas 的容器
带有 $('.kineticjs-content').keydown( function() { ... } ) 的 KineticJS 的 Container-Div（由 Kinetic 创建）

只有 $(window) 有效。在尝试了普通的 Html5-Canvas 之后，我发现 Canvas-Element 具有对键盘事件的内置支持。所以我认为，KineticJS 在这里做了一些神奇的事情。可以排除错误的选择器用法。

我使用以下代码检查了每个选择器：console.log( $(selector).length )

有人可以帮忙吗？提前谢谢！

【问题讨论】：

您现在找到问题的解决方案了吗？

标签： html events canvas html5-canvas kineticjs

【解决方案1】：

见link，你需要：

var canvas=layer.getCanvas()._canvas;
$(canvas).attr('tabindex', 0); // increase tabindex if needed
canvas.focus();
$(canvas).keydown(function (e) {
    console.log(e.keyCode); // your handler here
});

【讨论】：

【解决方案2】：

我建议使用其中一个键盘插件：

它们与 KineticJS 配合得很好。

【讨论】：

【解决方案3】：

根据我在这方面的有限经验（2 天），我看到你添加的每一层都变成了一个画布，所以如果你有一个变量中最顶层的引用（即topmostLayer），你可以这样做

var canvas = $(topmostLayer.getContext().canvas);

有了这个，@devnull69 建议的就行了：

canvas.attr('tabindex', 0);
canvas.keydown(function (ev) { ... });

我在我的应用程序中安装了它并且工作正常。

【讨论】：

【解决方案4】：

如果你可以在其中包含 javascript，代码如下：

if(keyIsPressed && keycode == somenumber){
doSomething();
}

【讨论】：

这是唯一真正的轻量级答案

【解决方案5】：

目前On 仅支持鼠标和触摸事件。

每一层都有自己的canvas，您可以抓取和附加事件。

【讨论】：

【解决方案6】：

您必须确保画布元素具有焦点，然后才能接受键盘事件。不幸的是 .focus() 方法在 Firefox 中对我不起作用，所以我尝试了这个，瞧

$('canvas').attr('tabindex', 0);
$('canvas').keydown(function(e) {
    alert(e.keyCode);
    e.preventDefault();    // to stop the key events from bubbling up
});

单击画布，它将获得焦点。

【讨论】：

在普通的 Html5-Application 中，您的答案是正确的。但在 kineticjs 管理的 Canvas 中，它也不起作用。