Отключить прокрутку клавиш со стрелками в браузере пользователей

Я делаю игру, используя canvas и javascript.

когда страница длиннее экрана (комментарии и т. д.) нажатие стрелки вниз прокручивает страницу вниз и делает игру невозможной для игры.

Что я могу сделать, чтобы предотвратить прокрутку окна, когда игрок просто хочет двигаться вниз?

Я думаю, с Java-играми, и так, это не проблема, пока пользователь нажимает на игру.

Я попробовал решение от: Как отключить прокрутку страницы в FF с помощью клавиш со стрелками ,но я не мог заставить его работать.

65
arrow-keys canvas javascript scroll

2 ответов

резюме

просто запретить по умолчанию действие браузера:

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.keyCode] = true;
        switch(e.keyCode){
            case 37: case 39: case 38:  case 40: // Arrow keys
            case 32: e.preventDefault(); break; // Space
            default: break; // do not block other keys
        }
    },
false);
window.addEventListener('keyup',
    function(e){
        keys[e.keyCode] = false;
    },
false);

магия происходит в e.preventDefault();. Это заблокирует действие по умолчанию события, в этом случае перемещение точки обзора браузера.

Если вам не нужны текущие состояния кнопки, вы можете просто упасть keys и просто выбросить действие по умолчанию на клавишах со стрелками:

var arrow_keys_handler = function(e) {
    switch(e.keyCode){
        case 37: case 39: case 38:  case 40: // Arrow keys
        case 32: e.preventDefault(); break; // Space
        default: break; // do not block other keys
    }
};
window.addEventListener("keydown", arrow_keys_handler, false);

обратите внимание, что этот подход также позволяет удалить обработчик событий позже, если вам нужно повторно включить прокрутку стрелки:

window.removeEventListener("keydown", arrow_keys_handler, false);

ссылки

121

для ремонтопригодности я бы прикрепил обработчик "блокировки" к самому элементу (в вашем случае, canvas).

theCanvas.onkeydown = function (e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        e.view.event.preventDefault();
    }
}

почему бы просто не сделать window.event.preventDefault()? MDN гласит:

window.event является собственностью свойства Microsoft Internet Explorer который доступен только во время вызова обработчика событий DOM. Свой value-объект события, обрабатываемый в данный момент.

далее показания:

1