Podsumowanie
Po prostu wyłącz domyślne działanie przeglądarki:
window.addEventListener("keydown", function(e) {
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
}, false);
Oryginalna odpowiedź
W mojej własnej grze użyłem następującej funkcji:
var keys = {};
window.addEventListener("keydown",
function(e){
keys[e.keyCode] = true;
switch(e.keyCode){
case 37: case 39: case 38: case 40:
case 32: e.preventDefault(); break;
default: break;
}
},
false);
window.addEventListener('keyup',
function(e){
keys[e.keyCode] = false;
},
false);
Magia dzieje się w e.preventDefault();
. Spowoduje to zablokowanie domyślnej akcji zdarzenia, w tym przypadku przesunięcia punktu widzenia przeglądarki.
Jeśli nie potrzebujesz aktualnych stanów przycisków, możesz po prostu upuścić keys
i po prostu odrzucić domyślną akcję na klawiszach strzałek:
var arrow_keys_handler = function(e) {
switch(e.keyCode){
case 37: case 39: case 38: case 40:
case 32: e.preventDefault(); break;
default: break;
}
};
window.addEventListener("keydown", arrow_keys_handler, false);
Zwróć uwagę, że to podejście umożliwia również późniejsze usunięcie programu obsługi zdarzeń, jeśli musisz ponownie włączyć przewijanie za pomocą klawiszy strzałek:
window.removeEventListener("keydown", arrow_keys_handler, false);
Bibliografia
lC.keys
zamiastkeys
nasłuchiwania klucza. Naprawiono to i przetestowałem w Firefoksie i Chrome. Zauważ, że wszystkie zmianykeys
są opcjonalne, ale ponieważ tworzysz grę ...keydown
a niekeyup
.Aby zachować łatwość obsługi, założyłbym obsługę "blokującą" na samym elemencie (w twoim przypadku na płótnie).
theCanvas.onkeydown = function (e) { if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { e.view.event.preventDefault(); } }
Dlaczego po prostu nie zrobić
window.event.preventDefault()
? MDN stwierdza:Dalsze lektury:
źródło
Próbowałem różnych sposobów blokowania przewijania po naciśnięciu klawiszy strzałek, zarówno jQuery, jak i natywny JavaScript - wszystkie działają dobrze w Firefoksie, ale nie działają w najnowszych wersjach Chrome.
Nawet jawna
{passive: false}
właściwość forwindow.addEventListener
, która jest zalecana jako jedyne działające rozwiązanie, na przykład tutaj .W końcu po wielu próbach znalazłem sposób, który działa dla mnie zarówno w Firefoksie, jak i Chrome:
window.addEventListener('keydown', (e) => { if (e.target.localName != 'input') { // if you need to filter <input> elements switch (e.keyCode) { case 37: // left case 39: // right e.preventDefault(); break; case 38: // up case 40: // down e.preventDefault(); break; default: break; } } }, { capture: true, // this disables arrow key scrolling in modern Chrome passive: false // this is optional, my code works without it });
Wycena
EventTarget.addEventListener()
z MDNźródło