Deaktivieren Sie das Scrollen mit der Pfeiltaste im Browser des Benutzers

85

Ich mache ein Spiel mit Canvas und Javascript.

Wenn die Seite länger als der Bildschirm ist (Kommentare usw.), wird durch Drücken des Abwärtspfeils die Seite nach unten gescrollt und das Spiel kann nicht mehr gespielt werden.

Was kann ich tun, um zu verhindern, dass das Fenster gescrollt wird, wenn der Player nur nach unten gehen möchte?

Ich denke, bei Java-Spielen ist dies kein Problem, solange der Benutzer auf das Spiel klickt.

Ich habe die Lösung ausprobiert aus: So deaktivieren Sie das Scrollen von Seiten in FF mit den Pfeiltasten , aber ich konnte es nicht zum Laufen bringen.

javascript canvas scroll arrow-keys Kaninepete
quelle

Antworten:

162

Zusammenfassung

Verhindern Sie einfach die Standard- Browseraktion:

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

Ursprüngliche Antwort

Ich habe die folgende Funktion in meinem eigenen Spiel verwendet:

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

Die Magie passiert in e.preventDefault();. Dadurch wird die Standardaktion des Ereignisses blockiert. In diesem Fall wird der Ansichtspunkt des Browsers verschoben.

Wenn Sie den aktuellen Schaltflächenstatus nicht benötigen, können Sie keysdie Standardaktion auf den Pfeiltasten einfach löschen und verwerfen:

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

Beachten Sie, dass Sie mit diesem Ansatz den Ereignishandler später auch entfernen können, wenn Sie das Scrollen mit der Pfeiltaste wieder aktivieren müssen:

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

Verweise

Zeta
quelle
7
Ich mag diese Lösung wirklich, aber es scheint nicht in Chrom zu funktionieren = /
Kaninepete
1
@Kaninepete: Es gab einen Syntaxfehler, den ich lC.keysanstelle des keysKeyup-Listeners verwendet habe. Dies wurde behoben und in Firefox und Chrome getestet. Beachten Sie, dass alle Änderungen keysoptional sind, aber da Sie ein Spiel
Zeta
In einigen älteren (mobilen) Browsern scheinen die Pfeiltasten nicht einmal Schlüsselereignisse auszulösen ... :-(
Michael
1
Wenn Sie dies tun und auf Ihrer Webseite Feldeingaben haben, können Sie die Leertaste oder die Pfeiltasten nicht zum Navigieren im Text verwenden. Großer Nachteil, den ich gefunden habe.
Einzel Entity
9
Beachten Sie, dass Sie wirklich verwenden müssen keydownund nicht keyup.
Ludder
4

Aus Gründen der Wartbarkeit würde ich den "blockierenden" Handler an das Element selbst anhängen (in Ihrem Fall an die Zeichenfläche).

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

Warum nicht einfach machen window.event.preventDefault()? MDN- Zustände:

window.eventist eine proprietäre Microsoft Internet Explorer-Eigenschaft, die nur verfügbar ist, während ein DOM-Ereignishandler aufgerufen wird. Sein Wert ist das Ereignisobjekt, das gerade behandelt wird.

Weitere Lesungen:

Yom S.
quelle