Home > Blockchain >  Why e.repeat is not working and have no errors in the console?
Why e.repeat is not working and have no errors in the console?

Time:11-15

$(document).on('keydown', function(e) {
    if (e.repeat) { return }
    if (e.key == 'q' || e.key == 'Q') {
        $('.box.green').addClass('active').click();
    } else if (e.key == 'w' || e.key == 'W') {
        $('.box.red').addClass('active').click();
    } else if (e.key == 'a' || e.key == 'A') {
        $('.box.yellow').addClass('active').click();
    } else if (e.key == 's' || e.key == 'S') {
        $('.box.blue').addClass('active').click();
    } else { return }
    $(document).on('keyup', function() {
        $('.box').removeClass('active');
    });
});

this code stores when any of the 'q', 'w', 'a', 's' key is clicked in an array. this works fine until I click and hold any key which results in repeated input. for dealing with this I used if (e.repeat) { return } but this is not working and does not give any error in the console. Help Me to find what I am doing wrong.

here is the remaining relevant code if it helps

var boxName = ['Q', 'W', 'A', 'S'];

$('.box').click(function() {
    userPattern.push(boxName.indexOf(this.textContent));
    console.log(boxName.indexOf(this.textContent));
});

CodePudding user response:

It looks like the repeat property isn't defined at all in the jQuery event (e) object.

Show code snippet

$(document).on("keydown keypress", function (e) {
   console.log(e.repeat);
});
body{
  height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Press and old any key...
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

But using addEventListener, it works with keydown. You will notice that the very first log is false and all the other ones are true.

Show code snippet

document.addEventListener("keydown", function(e){
  console.log(e.repeat); // If pressed more then once (in less then 1000ms) "true"
});
body{
  height: 100vh;
}
Press and hold any key...
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>


Here is a code suggestion for you:

document.addEventListener('keydown', function(e) {
  if (e.repeat) {
    return;
  }
  console.log(`The "${e.key}" is down.`);
  if (e.key == 'q' || e.key == 'Q') {
    $('.box.green').addClass('active').click();
  } else if (e.key == 'w' || e.key == 'W') {
    $('.box.red').addClass('active').click();
  } else if (e.key == 'a' || e.key == 'A') {
    $('.box.yellow').addClass('active').click();
  } else if (e.key == 's' || e.key == 'S') {
    $('.box.blue').addClass('active').click();
  } else {
    return;
  }
});

// It is a good practice NOT to have event handlers defined in another one.
$(document).on('keyup', function() {
  // clear the console
  console.clear()
  $('.box').removeClass('active');
});
body {
  height: 100vh;
}

.active {
  border: 3px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Press and hold any of the "q", "w", "a", "s" keys

<div class="box green">GREEN</div>
<div class="box red">RED</div>
<div class="box yellow">YELLOW</div>
<div class="box blue">BLUE</div>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

And about the keyup handler: you may want to remove the active class only on the relevant element instead of all the .box elements...


Additionally: It is a good practice NOT to have event handlers defined in another one to avoid registering multiple times the same handler.

  • Related