Question

我有以下代码（它基本上改变了我设置的图像，具体取决于我按下的键）。我遇到的问题是当用户同时按下两个键时。（例如：右箭头键和左箭头键）。如果同时按下多个键，如何阻止输出？

  <div id="slide"><img src="http://i.imgur.com/r41vA8p.png" /></div>
  </div>

 $(document).keydown(function(e){
      if (e.keyCode == 37) { 
           $('#slide').html('<img src="img">');
        }
      if (e.keyCode == 38) {
           $('#slide').html('<img src="img">');
        }
      if (e.keyCode == 39) { 
           $('#slide').html('<img src="img">');
        }
      if (e.keyCode == 40) { 
           $('#slide').html('<img src="img">');
        }
    });

感谢。

更好的解释：

如果按住左键，则同时右键按下，不会发生任何事件，也不会在该情况下切换到正确的位置。

Answer 1

如果JavaScript支持XOR比较运算符，这会更容易。我必须用ANDs ORs和NOTs（＆amp;＆amp;，|| ,!）创建XOR。但是，它有效。

每按一次箭头键，它就会在地图中变为true。如果不止一个是同时无效，否则相应地更改图像。

每次箭头键被抬起时，它在地图中都会变为假。

var map = {37: false, 38: false, 39: false, 40:false};
$(document).keydown(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = true;
         if((map[37] && !map[38] && !map[39] && !map[40]) ||
            (!map[37] && map[38] && !map[39] && !map[40]) ||
            (!map[37] && !map[38] && map[39] && !map[40]) ||
            (!map[37] && !map[38] && !map[39] && map[40])) {
            if (map[37]) {
                $('#im').html('<img src="http://i.imgur.com/BXeUGsv.png">');
            } else if (map[38]) {
                $('#im').html('<img src="http://i.imgur.com/MaU1zD0.png">');
            } else if (map[39]) {
                $('#im').html('<img src="http://i.imgur.com/kY8MnnC.png">');
            } else if (map[40]) {
                $('#im').html('<img src="http://i.imgur.com/r41vA8p.png">');
            }
        }
    }
}).keyup(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = false;
    }
});

修改

旧代码允许按下三个按钮。修正了它。

演示新代码here

旧答案小提琴here

Answer 2

这是一种更好的方法来实现这一点..递归并使用which而不是keyCode（出于跨浏览器的原因）。

<强> Example

var base,neutral,up,down,left,right;

  base = 'http://www.designofsignage.com/application/symbol/hospital/image/600x600/';
  neutral = 'emergency.jpg';
  up = 'arrow-up.jpg';
  down = 'arrow-down.jpg';
  left = 'arrow-left.jpg';
  right = 'arrow-right.jpg';

var change_image = function(src){
  $('#slide img').attr('src',base+src);
}

change_image(neutral); //default

$(document).on('keydown',function(e){
  var k = e.which;
  switch(k){
    case 37:
      change_image(left);
    break;
    case 38:
      change_image(up); 
    break;
    case 39:
      change_image(right);  
    break;
    case 40: 
      change_image(down);   
    break;          
  }

}).on('keyup',function(){
  change_image(neutral); //default on keyup
});

时间不足

基本上，您为每个箭头键设置“状态”，然后重置。按下箭头键时问题是active_states上升。只需解决这个问题，你就可以开始了！

http://codepen.io/anon/pen/rBcGL/

如果同时按下，则防止输出两个箭头键

2 个答案: