2

我正在尝试检测keydownand 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 不是一个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) { /*...*/ }
};

这会起作用（除了它只会在屏幕被主动拉伸时起作用......所以它不会发生在键被按下并且窗口边缘被按住但没有被拖动的情况下（这可能会导致如果浏览器比调整大小更频繁地触发 keydown 事件，则闪烁）。

更合适的答案可能是另一种方式：

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 回答