Question

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

我尝试了（使用jQuery）：

$（ selector ）。keydown（function（e）{...}）

使用以下选择器：

窗口（正在运行，但它正在监听整个窗口，从而不太好）
所有Canvas-Elements $（'canvas'）＆lt; - not working
容器，其中嵌入了KineticJS及其Canvas ＆lt; - not working
KineticJS的容器Div（由Kinetic创建）与$（'。kineticjs-content'）。keydown（function（）{...}）＆lt; - not working < / LI>

只有$（窗口）正常工作。在尝试使用简单的Html5-Canvas后，我发现，Canvas-Element内置了对键盘事件的支持。所以我认为，KineticJS正在这里做一些神奇的事情。可以排除错误的选择器使用。

我使用以下代码检查了每个Selector：console.log（$（selector）.length）

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

Answer 1

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

他们与KineticJS一起工作很好。

Answer 2

如果您可以在其中加入javascript，请输入以下代码：

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

Answer 3

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

每个图层都有自己的canvas，您可以抓取并附加事件。

Answer 4

根据我对此有限的经验（2天），我看到你添加的每一层都变成了画布，所以如果你有一个变量中最顶层的参考（即topmostLayer），你可以做到

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

有了这个，@devnull69建议正常工作：

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

我已将它应用到我的应用程序中并且工作正常。

Answer 5

请参阅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
});

Answer 6

在接受键盘事件之前，您必须确保canvas元素具有焦点。不幸的是，.focus（）方法在Firefox中对我不起作用，所以我尝试了这个并且voilà

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

单击画布，它将具有焦点。

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

6 个答案: