Skip to content
Advertisement

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

$(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));
});

Advertisement

Answer

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

$(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...

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

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...

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>

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.

Advertisement