调整窗口大小时是否可以侦听keydown和keyup

Question

我正在尝试调整窗口大小时检测keydown和keyup。到目前为止，我尝试过的操作仅触发键事件after调整大小。

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

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

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

Answer 1

[好，所以您可能会遇到的部分问题是keydown不是on或off东西，而是一成不变的东西。onresize也是如此。

当您调整窗口大小时，将反复调用该事件。另外，由于JS不是多线程的，因此这些事件中只有一个会同时发生。其他事件将排队等待其他事件完成后立即运行。

所以，您真正想要的是一个事件设置的状态机，另一个事件检查的状态机。

快速示例：

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

从体系结构的角度来看，这还不完美，但更多地考虑了在其他环境中必须执行的操作。