我正在使用 Javascript、jquery 和 Canvas 标签实现一个游戏。当画布标签具有焦点时，如何防止浏览器处理键盘快捷键？我尝试过 event.stopPropagation() 但没有效果。
我可以拾取键盘事件。但是，当用户按空格键时，网页会在 Firefox 中向下滚动。箭头键也会发生同样的情况。
根本问题是默认情况下浏览器不会使画布“可聚焦”。我能想到的最好的解决方法是设置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为真：
// Add content editable to help ensure the canvas retains focus
$("#canvas").attr("contentEditable", "true")
$("#canvas")[0].contentEditable = true;
这是我最初提出的解决方案，但在我看来，它比tabindex option.
另一件需要考虑的事情是，浏览器倾向于用边框来勾画内容可编辑元素。这可能会让一些用户感到反感。幸运的是，你可以用这段 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
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
