Резюме
Просто предотвратите действие браузера по умолчанию:
window.addEventListener("keydown", function(e) {
if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
e.preventDefault();
}
}, false);
Если вам необходимо поддерживать Internet Explorer или другие старые браузеры, используйте e.keyCode
вместо e.code
, но помните, что _ 4_ устарело, и вам нужно использовать фактические коды вместо строк:
// Deprecated code!
window.addEventListener("keydown", function(e) {
// space and arrow keys
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
}, false);
Оригинальный ответ
В своей игре я использовал следующую функцию:
var keys = {};
window.addEventListener("keydown",
function(e){
keys[e.code] = true;
switch(e.code){
case "ArrowUp": case "ArrowDown": case "ArrowLeft": case "ArrowRight":
case "Space": e.preventDefault(); break;
default: break; // do not block other keys
}
},
false);
window.addEventListener('keyup',
function(e){
keys[e.code] = false;
},
false);
Волшебство происходит в e.preventDefault();
. Это заблокирует действие по умолчанию для события, в данном случае перемещение точки обзора браузера.
Если вам не нужны текущие состояния кнопок, вы можете просто отбросить keys
и просто отказаться от действия по умолчанию для клавиш со стрелками:
var arrow_keys_handler = function(e) {
switch(e.code){
case "ArrowUp": case "ArrowDown": case "ArrowLeft": case "ArrowRight":
case "Space": e.preventDefault(); break;
default: break; // do not block other keys
}
};
window.addEventListener("keydown", arrow_keys_handler, false);
Обратите внимание, что этот подход также позволяет удалить обработчик событий позже, если вам нужно повторно включить прокрутку клавиш со стрелками:
window.removeEventListener("keydown", arrow_keys_handler, false);
использованная литература
person
Zeta
schedule
18.01.2012