Question

我正在使用Javascript，jquery和Canvas标签实现游戏。当canvas标记具有焦点时，如何防止浏览器处理键盘快捷键？我试过了event.stopPropagation（），它没有效果。

我可以拿起键盘事件。但是，当用户按空格键时，网页会在Firefox中向下滚动。箭头键也是如此。

Answer 1

根本问题是默认情况下浏览器不会使画布“可聚焦”。我能想出的最佳解决方法是在画布上设置tabindex：

$("#canvas")
    // Add tab index to ensure the canvas retains focus
    .attr("tabindex", "0")
    // Mouse down override to prevent default browser controls from appearing
    .mousedown(function(){ $(this).focus(); return false; }) 
    .keydown(function(){ /* ... game logic ... */ return false; });

如果由于某种原因你无法设置tabindex，你也可以通过将contentEditable设置为true来使画布“可聚焦”：

// Add content editable to help ensure the canvas retains focus
$("#canvas").attr("contentEditable", "true")
$("#canvas")[0].contentEditable = true;

这是我最初提出的解决方案，但在我看来，它比tabindex选项更为讨厌。

另一件需要考虑的事情是浏览器倾向于使用边框勾勒出内容可编辑元素。这对一些用户来说可能是令人不快的。幸运的是，你可以用这一点css摆脱它：

#canvas { outline: none; }

我在Windows XP，Mac OSX和Linux上测试了Chrome 3/4/5和FireFox 3.0 / 3.5 / 3.6中的两种解决方案。这是一个有效的例子：http://xavi.co/static/so-canvas-keyboard.html

Answer 2

试试event.preventDefault();。此外还有keypress，keydown和keyup个活动...您可以尝试各自的活动。

如何使用jquery为HTML画布提供键盘焦点？

2 个答案: