web-dev-qa-db-ja.com

ユーザーのブラウザーで矢印キーのスクロールを無効にする

キャンバスとjavascriptを使用してゲームを作っています。

ページが画面よりも長い場合（コメントなど）、下矢印を押すとページが下にスクロールし、ゲームをプレイできなくなります。

プレーヤーがちょうど下に移動したいときにウィンドウがスクロールしないようにするにはどうすればよいですか？

Javaゲームなどで、ユーザーがゲームをクリックする限り、これは問題ではありません。

解決策を試してみました： FFで矢印キーを使用してページのスクロールを無効にする方法 ですが、動作させることができませんでした。

javascriptcanvasscrollarrow-keys
78
Kaninepete

概要

単純に デフォルトを防止 ブラウザアクション：

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

参照資料

146
Zeta

保守性のために、要素自体（あなたの場合はキャンバス）に「ブロッキング」ハンドラーを追加します。

_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オブジェクトです。

さらに読む：

2
Yom S.