Tengo un problema con el keydown del evento del documento. Cuando presioné las teclas específicas (1 o 2), el evento keydown se propaga al niño de entrada. Usé event.stopPropagate() pero no funciona.
Aquí mi código:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TEST KEYDOWN EVENT</title> </head> <body> <form> <label>Number of Series</label> <input type="number" name="nbSeries" value="10" id="nbSeries"/> </form> <script type="text/javascript"> document.addEventListener('keydown', keyPressed); function keyPressed(e){ e.stopPropagation(); if(e.code == "Digit1" || e.code == "Digit2"){ console.log('You pressed ' + e.code); } } </script> </body> </html>En la consola, cuando cambio el valor de mi entrada (#nbSeries) usando las teclas 1 y 2, aparece: Presionaste "keyCode"...
stopPropagation solo detiene la propagación del evento, evitando que otros oyentes vean el evento más adelante. Eso no detiene el comportamiento predeterminado de la acción. Por ejemplo, no evita que aparezcan caracteres al escribir en un campo de entrada. Para lograr eso, necesita preventDefault en su lugar.
document.addEventListener('keydown', keyPressed); function keyPressed(e) { e.preventDefault(); if (e.code == "Digit1" || e.code == "Digit2") { console.log('You pressed ' + e.code); } } <form> <label>Number of Series</label> <input type="number" name="nbSeries" value="10" id="nbSeries" /> </form>Además, aunque no está directamente relacionado con el problema que estaba experimentando, también hay algo que debe tener en cuenta sobre cómo funciona la propagación de eventos. Los oyentes se disparan en este orden:
Dado que el oyente de pulsación de tecla del documento está escuchando eventos burbujeantes, se activa solo después de que el evento haya llegado a los oyentes del objetivo. Si estuviera intentando que un oyente en el documento detuviera la activación de un oyente en un elemento secundario, necesitaría agregar el oyente del documento en la fase de captura en su lugar para evitar la propagación hacia abajo hasta el destino, lo que se puede hacer pasando true a tercer parámetro de addEventListener .