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

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

---

我可以拿起键盘事件。但是，当用户按下空格键时，网页会在Firefox中向下滚动。箭头键也会发生同样的情况

尝试

event.preventDefault（）。还有
keypress
、
keydown
和
keydup
事件。。。您可以尝试每一种方法，看看哪种方法有效。
根本问题是默认情况下浏览器不会使画布“可聚焦”。我能想到的最佳解决方法是在画布上设置
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; }

我在WindowsXP、MacOSX和Linux上用Chrome3/4/5和Firefox3.0/3.5/3.6测试了这两种解决方案。这里有一个工作示例：
Woot。这似乎是正确的解决办法。对我有用。尽管使用时要小心，因为在使用过程中可能会无意中禁用其他有用的键盘浏览器快捷键。这在FF和Chrome中有效，甚至在最新的ie中也有效，但我想指出的是，在ie中，由于ie对待tabindex和contentEditable的方式，每次单击都会导致您滚动到元素顶部