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

Question

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

我尝试了(使用jQuery):

$(selector).keydown(function(e){...})

使用以下选择器:

• 窗口(它正在工作,但它正在监听整个窗口,从而不好)
• 所有Canvas-Elements $('canvas') < - 不起作用
• 容器,KineticJS及其Canvas嵌入式 < - 无效
• KineticJS的容器Div(由Kinetic创建)与$('.kineticjs-content').keydown(function(){...}) < - 不工作

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

我用这段代码检查了每个Selector:console.log($(selector).length)

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

Answer 1

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

\n\n

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

\n\n

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

\n