我正在尝试检测 keydown
和 keyup
,同时调整窗口大小时。到目前为止,我所尝试的只是在调整大小完成后 触发关键事件。
$(window).resize(function(){
console.log("resizing");
});
$(window).keydown(function(e){
$("#key").css("background","green");
});
$(window).keyup(function(e){
$("#key").css("background","red");
});
最佳答案
好吧,你可能在这里遇到的部分问题是 keydown 不是 on
或 off
的东西,它是一个不断开火的东西。< br/>
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) { /*...*/ }
};
那会起作用(除了它只会在屏幕被主动拉伸(stretch)时起作用...所以在按下键并且窗口边缘被按住但没有拖动的情况下不会发生(如果浏览器触发 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);
};
从架构的 Angular 来看,这并不完美,但更符合您在另一个环境中必须执行的操作的想法。
关于javascript - 调整窗口大小时是否可以监听 keydown 和 keyup,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12694342/