Question

我编写了以下函数来使用按键切换div的内容。基本上我显示2个图像，这些图像被更改为另一个onkeydown。如果onkeyup，图像将被恢复。

只要按下一个键，它就可以很好地工作。如果我使用按键快捷键[224 + 86]（Meta + V），最后释放的键“保持”onkeydown（由于某种原因没有生成onkeyup）。

//CMD
$(document).keydown(function (e) {
    if (e.keyCode == 224)
        document.getElementById("loading").innerHTML = '<div style="position: absolute; left: -30px; top: 8px; width: 600px; height:600px; padding: 0px; border: 0px; z-index:200; padding:158px;"><img src="img/mac/1_b.png" /></div>';    
});

$(document).keyup(function (e) {
    if (e.keyCode != 224)
        document.getElementById("loading").innerHTML = '<div style="position: absolute; left: -30px; top: 8px; width: 600px; height:600px; padding: 0px; border: 0px; z-index:200; padding:158px;"><img src="img/mac/1.png" /></div>';
});

//V
$(document).keydown(function (e) {
    if (e.keyCode == 86)
        document.getElementById("loading2").innerHTML = '<div style="position: absolute; left: 95px; top: 9px; width: 600px; height:600px; padding: 0px; border: 0px; z-index:200; padding:158px;"><img src="img/mac/2_b.png" /></div>';    
});

$(document).keyup(function (e) {
    if (e.keyCode == 86)
        document.getElementById("loading2").innerHTML = '<div style="position: absolute; left: 95px; top: 9px; width: 600px; height:600px; padding: 0px; border: 0px; z-index:200; padding:158px;"><img src="img/mac/2.png" /></div>';    
});

任何人都可以指出我正确的方向吗？非常感谢任何提示！

Answer 1

我认为问题在于你将这些分开了太多。您应该将它们全部组合到同一个事件处理程序中，看看会发生什么。你也应该结合逻辑。

而不是多次这样做：

$(document).keydown(function (e) {
    if (e.keyCode == 224)
        document.getElementById("loading").innerHTML = '....';    
});

尝试将逻辑组合成一个回调事件：

$(document).keydown(function (e) {
    if (e.keyCode == 224)
        document.getElementById("loading").innerHTML = '....'; 
    if (e.keyCode == 86)
        document.getElementById("loading2").innerHTML = '....';   
});

另外 - 你确定你有正确的CMD密钥吗？我认为这比你在这里所做的更难检测 - http://www.quirksmode.org/js/keys.html。看看这里：jQuery key code for command key以获取有关如何使用CMD密钥的一些建议。

Keypress检查（未触发onkeyup）

1 个答案: