Отключить прокрутку клавиш со стрелками в браузере пользователя - PullRequest
Новая
       21

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

75 голосов
/ 19 января 2012

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

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

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

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

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

Ответы [ 2 ]

141 голосов
/ 19 января 2012

Резюме

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

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);

Ссылки

2 голосов
/ 12 января 2018

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

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. это значение - это объект Event, который в данный момент обрабатывается.

Дополнительные показания:

...