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

【问题标题】：Prevent two arrow keys from outputting if pressed at same time如果同时按下，防止两个箭头键输出
【发布时间】：2014-04-02 23:38:19
【问题描述】：

我有以下代码（它基本上会根据我按下的键更改我设置的图像）。我遇到的问题是当用户同时按下 两个键。（例如：右箭头键和左箭头键）。如果同时按下多个键，如何防止输出？

  <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">');
        }
    });

谢谢。

更好的解释：

如果按下并按住左键，则同时按下右键按下，则不会发生任何事件，也不会在该实例中向右切换。

【问题讨论】：

你能把它扔进一个jsfiddle吗？据我所知，最后一个键将显示。
当然没问题，jsfiddle.net/CcrjW/1，它会检测到最后一个键，是的。如果同时按下两个键，我只想让它保持默认图像。
默认是up？ on.('keyup') 已设置。
@WalkOfLife 如果正确解释要求，如果按下并按住left，然后同时按下right，应该不会发生任何事件？在那种情况下不切换到right？
最后一个键是什么将被放置。组合键有点棘手。

标签： jquery html key

【解决方案1】：

如果 JavaScript 支持 XOR 比较运算符，这将更容易。我必须用 AND 或 OR 和 NOT（&&、||、！）创建 XOR。但是，它有效。

每次按下箭头键时，它都会在地图中变为真。如果同时有多个为真，则什么也不做，否则相应地更改图像。

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

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

【讨论】：

正是我想要的。还有一个聪明的方法！不错。
@WalkOfLife 查看更新后的代码。虽然旧代码不允许同时按下 2 个键，但它确实允许按下 3 个键。
我什至没有注意到。再次感谢！

【解决方案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/

【讨论】：

+1 编辑，没有注意到您的评论。等待调整:)！