Deaktivieren Sie das Scrollen mit der Pfeiltaste im Browser des Benutzers

Question 1

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.

Question 2

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

MDN: window.addEventListener
MDN: window.removeEventListener

Question 3

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: