2

これを使用して、ブラウザでスペースバーが持つ「スクロール」効果を無効にしています。これは他のキー押下イベントにも影響しますか?

window.onkeydown = function(e) {
    return !(e.keyCode == 32);
};

誰かがこれが何をしているのか説明してもらえますか? このコードが悪いのかどうかはわかりませんが、ページ内の他のキープレス関連のコードが無効になっているようです。これが理由ではないことを確認したいと思います。

ありがとう！

4

3 に答える 3

2

ASCIIコード32は、スペースバーキーを表すASCII値であり、コードは基本的に、そのキーコードが検出されるたびにfalseを返すようにブラウザに指示しています。falseが返されるため、あなたが話すスクロールバー効果は実際には正常に無効になっています。

ただし、この便利なスペースバースクロール無効化機能の不幸な副作用は、ページ上のあらゆる場所でスペースバーのキー押下を無効にすることです。

falseを返す代わりに、キーコードが検出された場合は、現在のscrollTop値をクロージャに渡して、関数をsetTimeoutイベントに返します。setTimeoutが発生すると、scrollTopの位置がリセットされ、setTimeoutイベントが最初に登録されたときの値に戻ります。

window.onkeydown = function(e) {
    if(event.keyCode == 32) { // alert($(document).scrollTop() );
        setTimeout(                 
            (function(scrollval) { 
                return function() { 
                    $(document).scrollTop(scrollval);
                };
            })( $(document).scrollTop() ), 0);
    }
};

ユーザーは、入力テキストボックスとテキスト領域でスペースバーを便利に使用できます。同時に、テキスト要素にフォーカスしていないときにスペースバーキーを押すと、ページがスクロールしなくなります。

ボンネットの下で、スクロールはまだ行われています。ユーザーが気付かないほど速い速度でリセットされているだけです。

この値を100または1000に増やすと、内部で何が起こっているかをよりよく理解できます。実際にページのスクロールが表示され、前のスクロール位置に戻ります。

これはChromeとFirefox13でのみテストされました！そのため、Internet Explorerなどのブラウザでは、setTimeout期間（現在は0）を別の値に調整する必要がある場合があります。必要に応じて、この機能を最新のブラウザでのみサポートすることにより、適切に機能を低下させる準備をしてください。

アップデート：

参考までに、これを主要なブラウザで互換性を持たせるために使用する方法を以下に示します。Chrome、Firefox、IE8、IE9、Safariでテストされています。

IE8 / IE9では機能しますが、あまりスムーズではありません。

// put the eventhandler in a named function so it can be easily assigned
   // to other events.
function noScrollEvent(e) {
    e = e || window.event;
    if(e.keyCode == 32) {  
        setTimeout(                 
            (function(scrollval) { 
                return function() { 
                    $(document).scrollTop(scrollval);
                };
            })( $(document).scrollTop() ), 0);
    }
}


// Chrome and Firefox must use onkeydown
window.onkeydown = noScrollEvent;

// Internet Explorer 8 and 9 and Safari must use onkeypress
window.document.onkeypress = noScrollEvent;
于 2012-05-19T00:43:58.590 に答える
1

上記の setTimeout を使用した回答は、遅延が 0 の Chome ではまったく機能しませんでした。遅延が 50 ミリ秒を超えると、機能し始めましたが、顕著なページ ジャンプが発生しました。setTimeout がページを上にスクロールするのが早すぎて、Chrome が後でページを下に移動したと思います。

以下は、うまく機能している私のソリューションです。ブラウザがページダウンを行うのを防ぐために、keydown イベントで false を返します。次に、ボタンなどに設定したイベントを確認して、代わりに keyup イベントを使用します。

$(mySelector).keyup(eventHandlerFunction);

[dom element].onkeydown = function(event) {
  if (event.keyCode == 32) {return false;}
};

注: 入力フィールドまたはその親がこの onkeydown ハンドラーによってカバーされている場合、入力フィールドはスペースバー キー イベントを反映しません。

于 2013-03-19T01:04:23.073 に答える
1

別の要素が keydown イベントにバインドされている場合、このコードの影響を受けません

私のフィドルを見て、キーダウンイベントをリッスンするテキストエリアを追加および削除してみてください

window.onkeydown = function(e) {
    return !(e.keyCode == 32);
};

document.getElementsByTagName("textarea")[0].onkeydown = function(e) {
    alert("hi");
}

http://jsfiddle.net/HnD4Y/

于 2012-05-19T00:25:44.637 に答える