每次我在 Canvas 上移动时,mousemove 事件都会起作用并调用 onMouseMove。虽然,keydown 和 keyup 事件永远不会起作用。我单击 Canvas 并按下一些键,但没有触发任何事件。有谁知道为什么这些事件不起作用?谢谢你的任何建议! 如果有人好奇代码的来源,我正在学习关于 udacity 的 html5 类(class)。
InputEngineClass = Class.extend({
keyState: new Array(),
setup: function() {
document.getElementById("gameCanvas").addEventListener('mousemove', gInputEngine.onMouseMove);
document.getElementById("gameCanvas").addEventListener('keydown', gInputEngine.onKeyDown);
document.getElementById("gameCanvas").addEventListener('keyup', gInputEngine.onKeyUp);
},
onMouseMove: function (event) {
console.log("Called onMouseMove");
var posx = event.clientX;
var posy = event.clientY;
},
onKeyDown: function (event) {
console.log("KEY DOWN!!!");
keyState[event.keyID] = true;
gInputEngine.update();
},
onKeyUp: function (event) {
console.log("KEY UP!!!");
keyState[event.keyID] = true;
},
update: function() {
KeyW = 87;
if(gInputEngine.keyState[KeyW]) console.log("FORWARD!!!");
}
});
gInputEngine = new InputEngineClass();
最佳答案
我会把我的评论变成一个答案,这样你就可以结束这个问题了。
要让 DOM 对象接收键盘事件,它们必须首先能够获得页面上的键盘焦点。只有这样,键盘事件才会指向该对象。为 Canvas 对象执行此操作的最简单方法是为其提供 tabIndex
属性。
canvas.setAttribute("tabindex", 0);
您可以在此处查看其他人对该问题的总结:http://www.dbp-consulting.com/tutorials/canvas/CanvasKeyEvents.html
关于Javascript 'keydown' 事件监听器不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18928116/