j查询多按键处理

jQuery multi-keypress handling

本文关键字：处理 查询      更新时间：2023-09-26

我已经用我使用的所有代码做了一个jsfiddle。

你可以看到我想用键盘箭头键移动的div。如您所见，我可以使用键盘向上/向下/向左/向右移动对象。我的问题是我希望对象对角线移动，这意味着使用上下键组合在一起。

我已经浏览了SO，但我没有找到任何示例来解释箭头键处理的确切情况。任何人都可以澄清一下。

提前感谢！

这是我下面的JS代码：

$(document).ready(function(){
var obj = $("#movetest")
$(window).on({
    keydown: function(e){
        if ( e.keyCode == 37 ){ move( obj, "left" ); }
        if ( e.keyCode == 38 ){ move( obj, "up" ); }
        if ( e.keyCode == 39 ){ move( obj, "right" ); }
        if ( e.keyCode == 40 ){ move( obj, "down" ); }
    }
})
});
function move(obj, dir){
    var curHPos = parseInt(obj.css("margin-left"),10),
        curVPos = parseInt(obj.css("margin-top"),10),
        newHPos = curHPos,
        newVPos = curVPos,
        diff = 10;
    if ( dir == "left" ) { newHPos = curHPos - diff; } else
    if ( dir == "right" ) { newHPos = curHPos + diff; } else
    if ( dir == "up" ) { newVPos = curVPos - diff; } else
    if ( dir == "down" ) {  newVPos = curVPos + diff; }
    obj.css({
        marginLeft: newHPos,
        marginTop: newVPos
    });
}

你需要看看这个：jQuery .keypress（） 可以同时检测多个键吗？

在恢复中，需要使用键下和键控事件。

我在这里结束了它：http://jsfiddle.net/GtG2p/2/

我基本上是这样做的：

var keys = {};
var obj = $("#movetest");
$(document).ready(function(){
  $(document).on({
    keydown: function(e){
        keys[e.which] = true;
        throwKeys();
    },
    keyup: function(e){
        delete keys[e.which];
        throwKeys();
    }
  });
});
function throwKeys(){
  for (var i in keys) {
    if (!keys.hasOwnProperty(i)) continue;
    if ( i == 37 ){ move( obj, "left" ); }
    if ( i == 38 ){ move( obj, "up" ); }
    if ( i == 39 ){ move( obj, "right" ); }
    if ( i == 40 ){ move( obj, "down" ); }
  }
}
相关文章：