Jquery keyboard event does not respond

Question

Jquery keyboard event does not respond

Navigation

#1 by (5 votes)

3

I made this script to move a div by pressing the arrow keys. The right and bottom keys are working perfectly, however, the top and left are not, the code is the same as the others.

Follow the code below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>        



    $(document).ready(function(){
      $(document).keydown(function(x){
        if(x.which == 39 || x.keyCode == 39){               
             $('div').animate({left: '1180px'});                 
        }           
      }).keyup(function(){
        $('div').animate().stop();
      });
    });


    $(document).ready(function(){
      $(document).keydown(function(x){
        if(x.which == 40 || x.keyCode == 40){               
             $('div').animate({top: '1180px'});              
        }           
      }).keyup(function(){
        $('div').stop();
      });
    });


    $(document).ready(function(){
      $(document).keydown(function(x){
        if(x.which == 37 || x.keyCode == 37){               
             $('div').animate({right: '1180px'});                
        }           
      }).keyup(function(){
        $('div').stop();
      });
    });


    $(document).ready(function(){
      $(document).keydown(function(x){
        if(x.which == 38 || x.keyCode == 38){               
             $('div').animate({ '1180px'});              
        }           
      }).keyup(function(){
        $('div').stop();
      });
    });


</script>

jquery eventos

asked by anonymous 01.01.2017 / 18:02

1 answer

Count vector elements and put links on the page Reload DataGridView in C #

score 5 · Accepted Answer

The way you did it was added multiple events for when you press a key, the keyup was added 4 times for example, maybe it is conflicting with the other keyDowns, it really is not necessary to make an event for each, the best is everything within a single event and use ifs or a switch for it

Also note that the has no property defined in if(x.which == 38 || x.keyCode == 38) , you added only 1180px:

$('div').animate({ '1180px'});

Another thing, you added .animate () without need:

  $(document).keydown(function(x){
    if(x.which == 39 || x.keyCode == 39){               
         $('div').animate({left: '1180px'});                 
    }           
  }).keyup(function(){
    $('div').animate().stop(); ///<--- aqui
  });

In the following example, I changed $('div') by .personagem so as not to affect other divs and preferably change right and bottom to left and top with nagative numbers, so jQuery will subtract from the already defined properties and CSS works well with negative numbers:

$(document).ready(function(){
  $(document).keydown(function(x){
    var keycode = x.which || x.keyCode; //Pega o código da tecla

    switch (keycode) {
        case 39:
            $('.personagem').animate({left: '1180px'});
        break;
        case 40:
            $('.personagem').animate({top: '1180px'});
        break;
        case 37:
            $('.personagem').animate({left: '-1180px'});
        break;
        case 38:
            $('.personagem').animate({top: '-1180px'});
        break;
    }           
  }).keyup(function(){
       $('.personagem').stop();
  });
});

.personagem {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    background: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><divclass="personagem"></div>

Another thing that might be interesting to do is to add .stop to another event to start, even if the keyup is not triggered, for example:

switch (keycode) {
    case 39:
        $('.personagem').stop().animate({left: '1180px'});
    break;
    case 40:
        $('.personagem').stop().animate({top: '1180px'});
    break;
    case 37:
        $('.personagem').stop().animate({left: '-1180px'});
    break;
    case 38:
        $('.personagem').stop().animate({top: '-1180px'});
    break;
}