$(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'); }); }); este código se almacena cuando se hace clic en cualquiera de las teclas 'q', 'w', 'a', 's' en una matriz. esto funciona bien hasta que hago clic y mantengo presionada cualquier tecla que resulte en una entrada repetida. para lidiar con esto usé if (e.repeat) { return } pero esto no funciona y no da ningún error en la consola. Ayúdame a encontrar lo que estoy haciendo mal.
aquí está el código relevante restante si ayuda
var boxName = ['Q', 'W', 'A', 'S']; $('.box').click(function() { userPattern.push(boxName.indexOf(this.textContent)); console.log(boxName.indexOf(this.textContent)); });Parece que la propiedad de repeat no está definida en absoluto en el objeto jQuery event ( e ).
$(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... Pero usando addEventListener , funciona con keydown . Notará que el primer registro es false y todos los demás son 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...Aquí hay una sugerencia de código para usted:
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> Y sobre el controlador keyup : es posible que desee eliminar la clase activa solo en el elemento relevante en lugar de todos los elementos .box ...
Además: es una buena práctica NO tener controladores de eventos definidos en otro para evitar registrar varias veces el mismo controlador.