keydown (repetición) se interrumpe cuando se dispara un evento de keyup (para OTRA tecla)
Esto es un poco extraño, así que me imagino que me falta algo obvio o esto es una falla con la forma en que se implementan estos eventos en los navegadores.
Permítanme resumir primero un escenario de ejemplo que surge este problema antes de proporcionar un ejemplo de caso aislado;
Las teclas de flecha se utilizan para mover el reproductor (ya que se activa una función handleKeyDown cada vez que se pulsa una tecla en cualquier lugar de la página). Del mismo modo, cada vez que se suelta una tecla, se activa otra función (handleKeyUp).
Cuando usted (el jugador) mantenga presionada la tecla izquierda, la función handleKeyDown se activa repetidamente (lo que ciertamente creo que desafía lo que esperaría y lo que el nombre implica, pero no obstante, este es un comportamiento normal en todos los navegadores, ya que estoy seguro que lo sabes).
Así que esto es lo que sucede: el jugador tiene una dirección para caminar en esa dirección; luego presionan una tecla numérica (para el elemento de tecla de acceso rápido) A medida que continúan caminando mientras mantienen presionada la dirección. ¡Lo que sucede aquí es que a medida que sueltas la tecla numérica para el elemento de acceso rápido, la repetición del movimiento del jugador simplemente se detiene!
He escrito un pequeño ejemplo aislado de este comportamiento:
<html>
<head>
<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type='text/javascript'>
var log = {};
var keyState = {};
var keyCount = {'down': 0, 'up': 0};
window.addEventListener('keydown', handleKeyDown, false);
window.addEventListener('keyup', handleKeyUp, false);
function handleKeyDown (e)
{
keyState[e.keyCode] = true;
keyCount.down++;
log.prepend(" ["+e.keyCode+"] ");
return false;
}
function handleKeyUp (e)
{
keyState[e.keyCode] = false;
keyCount.down++;
return true;
}
$(function(){log = $('#log');});
</script>
</head>
<body>
<div id='debug'></div>
<div id='log'></div>
</body>
También puedes probarlo aquí:
Presione cualquier tecla en la página y verá que aparece el KeyCode en la página. Mientras mantiene presionada la tecla, el código se repite una y otra vez.
El comportamiento se vuelve peculiar cuando se presiona una tecla diferente mientras se mantiene presionada la tecla inicial. Al soltar esa clave reciente, la repetición se detiene desde la primera clave. Curiosamente, si prueba el ejemplo y mantiene presionada una tecla, y luego mantiene presionada una segunda tecla, pero en lugar de soltar la segunda, suelte la primera: la segunda tecla SIGUE repitiéndose.
ntonces, lo que parece continuar es que cuando se dispara el evento keyup, parece terminar la repetición en eventos keydown que se dispararon en una tecla anterior.
He intentado todo tipo de cosas, desde el uso de return false en ambas funciones de manejo de eventos, return true, presionar teclas en lugar de presionar teclas, guardar estados de teclas y continuar el movimiento si el estado clave del botón sigue siendo cierto, pero lo que sucede El problema es que cuando se activa el keyup, se eliminan todos los eventos de keydown que se propagan activamente. He leído a través deJavaScript Madness: Eventos de teclado y no veo nada sobre este tipo específico de comportamiento.
¿Es este un defecto de diseño con la implementación de eventos clave, o me falta algo? Observo este mismo comportamiento en Chrome, IE y Firefox.
¿Algún consejo o aportación?