2

ウィンドウのサイズが変更されている間に、keydownとを検出しようとしています。keyup私がこれまでに試したことは、サイズ変更が完了した後にのみキー イベントを発生させます。

$(window).resize(function(){
    console.log("resizing");    
});

$(window).keydown(function(e){
    $("#key").css("background","green");
});

$(window).keyup(function(e){
    $("#key").css("background","red");
});
4

1 に答える 1

1

さて、ここで遭遇するかもしれない問題の一部は、keydown はonorではなく、off常に火を噴くものだということです。
についても同様ですonresize。

ウィンドウのサイズを変更すると、イベントが何度も呼び出されます。
また、JS はマルチスレッド化されていないため、一度に発生するイベントは 1 つだけです。他のイベントは、他のイベントが終了した直後に実行するためにキューに入れられます。

したがって、実際に必要なのは、1 つのイベントが設定し、もう 1 つのイベントがチェックするステート マシンです。

簡単な例:

var BrowserWindow = { width : 0, height : 0, prevWidth : 0, prevHeight : 0 };

window.onresize = function (e) {
   /* set prevWidth/prevHeight, get new width/height */
};

window.onkeydown = function (e) {
    if (BrowserWindow.prevWidth !== BrowserWindow.width) { /*...*/ }
};

それは機能します（ただし、画面がアクティブに引き伸ばされている場合にのみ機能します...したがって、キーが押されていて、ウィンドウの端が保持されているがドラッグされていない場合には発生しません（これにより、ブラウザがキーダウン イベントをサイズ変更よりも頻繁に発生させるとちらつきます)。

より適切な答えは、逆の方法である可能性があります。

var Keyboard = {
    currentKeys : {},
    previousKeys : {}
};


window.onkeydown = function (e) { Keyboard.currentKeys[e.keyCode] = true; };
window.onkeyup   = function (e) { delete Keyboard.currentKeys[e.keyCode]; };


window.onresize = function (e) {
    var key = <X>,
        state = "";

    state = Keyboard.currentKeys[key] && !Keyboard.previousKeys[key]
          ?    "pressed"
          : !Keyboard.currentKeys[key] && Keyboard.previousKeys[key]
          ?    "released"
          : Keyboard.currentKeys[key] && Keyboard.previousKeys[key]
          ?    "held"
          :    "off";

    Keyboard.previousKeys = Keyboard.currentKeys;
    doSomething(state);
};

これは、アーキテクチャの観点からは完全ではありませんが、別の環境で何をしなければならないかという考えに沿っています。

于 2012-10-02T17:14:41.630 に答える