web-dev-qa-db-fra.com

Désactiver le défilement par flèche dans le navigateur des utilisateurs

Je réalise un jeu en utilisant canvas et javascript.

Lorsque la page est plus longue que l'écran (commentaires, etc.), une pression sur la flèche vers le bas la fait défiler vers le bas et rend le jeu impossible à lire.

Que puis-je faire pour empêcher la fenêtre de défiler lorsque le joueur veut simplement descendre?

J'imagine qu'avec Java jeux, etc.), ce n'est pas un problème tant que l'utilisateur clique sur le jeu.

J'ai essayé la solution de: Comment désactiver le défilement de page dans FF avec les touches fléchées , mais je n'ai pas réussi à le faire fonctionner.

javascriptcanvasscrollarrow-keys
78
Kaninepete

Sommaire

Simplement empêcher la valeur par défaut action du navigateur:

window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

Réponse originale

J'ai utilisé la fonction suivante dans mon propre jeu:

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

La magie se passe dans e.preventDefault(); . Ceci bloquera l'action par défaut de l'événement, dans ce cas, déplace le point de vue du navigateur.

Si vous n'avez pas besoin des états actuels du bouton, vous pouvez simplement déposer keys et simplement annuler l'action par défaut sur les touches de direction:

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

Notez que cette approche vous permet également de supprimer le gestionnaire d'événements ultérieurement si vous devez réactiver le défilement par touches fléchées:

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

Les références

146
Zeta

Pour la maintenabilité, j'attacherais le gestionnaire "bloquant" sur l'élément lui-même (dans votre cas, le canevas).

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

Pourquoi ne pas simplement faire window.event.preventDefault()? MDN déclare:

window.event Est une propriété propriétaire de Microsoft Internet Explorer, disponible uniquement pendant l'appel d'un gestionnaire d'événements DOM. Sa valeur est l'objet Event en cours de traitement.

Lectures supplémentaires:

2
Yom S.