У меня была похожая проблема, и я нашел исправление.
Вот что я придумал:
function $(){
return document.querySelector.apply(document,arguments);
}
var canvas = $('canvas'),
keysDown = []; // You can also define this as an object, {}
canvas.tabIndex = 0;
canvas.onclick = function(e){
document.body.scrollTop = canvas.offsetTop; // scrolls to canvas element
canvas.focus(); // re-focuses canvas in case the scroll unfocused it
}
canvas.onkeydown = canvas.onkeyup = function(e){
keysDown[e.keyCode] = e.type == 'keydown';
e.preventDefault();
return false;
}
function isDown(key){
return keysDown[key];
}
function resetMap(){
keysDown = [];
return false;
}
Чтобы проверить, нажата ли клавиша, используйте isDown(keycode) либо в интервальном цикле, либо в функции нажатия клавиши.
Для обычного ключевого слушателя:
canvas.onkeydown = canvas.onkeyup = function(e){
// [...]
if(isDown(17) && isDown(32)){ // Ctrl + Space
alert('Ctrl and Space were pressed');
resetMap();
}
e.preventDefault();
return false;
}
Для быстрого слушателя клавиш, похожего на ActionScript 2.0 Key.isDown
function KeyLoop(){
if(isDown(17) && isDown(32)){ // Ctrl + Space
console.log('Lots of text');
resetMap();
}
setTimeout(keyLoop,1000/24); // @ 24 fps
}
keyLoop();
Я поместил другое действие здесь по двум причинам: 1) Смешивание alert() с повторяющимся интервалом никогда не является хорошей идеей, и 2) продемонстрировать отсутствие задержки, что делает его похожим на AS2 Key.isDown() функция. Чтобы увидеть зарегистрированный текст, вызовите firebug или обычную консоль JavaScript. В Chrome это Ctrl Shift J . В Firefox Ctrl Shift K .
Это должно исправить вашу проблему с прокруткой, сосредоточившись на элементе, когда вы щелкаете по холсту. Дополнительным преимуществом является то, что вы можете проверять сразу несколько ключей, поскольку вы используете keysDown[] в качестве абстракции от исходного события, что упрощает создание игры с 8 направлениями.