我正在使用Javascript、jquery和Canvas标签来实现一个游戏。当canvas标签获得焦点时,如何防止浏览器处理键盘快捷键?我尝试了event.stopPropagation(),但没有效果。
我可以捕获键盘事件。然而,在Firefox中,当用户按下空格键时,网页会向下滚动。箭头键也是同样的情况。
我正在使用Javascript、jquery和Canvas标签来实现一个游戏。当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
设置为 true,使画布具有“可聚焦性”:
// Add content editable to help ensure the canvas retains focus
$("#canvas").attr("contentEditable", "true")
$("#canvas")[0].contentEditable = true;
这是我最初想到的解决方案,但我认为它比使用tabindex
选项更加tricky。
另一个要考虑的问题是,浏览器倾向于用边框勾勒可编辑元素。这可能会让一些用户感到不适。幸运的是,您可以通过这个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
event.preventDefault();
。此外,还有keypress
、keydown
和keyup
事件……你可以尝试每个事件,看看哪个有效。