Tengo una aplicación web creada con node, express y ejs como motor de visualización. En una página específica, tengo un detector de eventos que irá a la página de inicio al presionar una tecla, así:
<script> document.addEventListener("keypress", function onPress(event) { window.location = ('/home'); }); </script>El problema es que también tengo un botón en esa página que, cuando se presiona, muestra un elemento modal de arranque que incluye la entrada de texto, por lo que cuando el modal está abierto y el usuario intenta ingresar alguna entrada, se activa el detector de eventos. ¿Hay alguna manera de ignorar este detector de eventos hasta que se cierre el modal?
He intentado darle a un DOM (que no contiene el modal) un tabindex para que sea seleccionable y poner el detector de eventos en eso, pero luego el usuario tiene que hacer clic en la página antes de que se pueda activar el detector de eventos, lo cual no es ideal.
Puede evitar que el event en la input se propague hacia el document usando event.stopPropagation y luego la entrada del usuario no activará el oyente de keypress de tecla del documento.
document.addEventListener("keypress", function (event) { console.log("event", event); console.log("keyPress"); }); const input = document.getElementById("user-input"); input.addEventListener("keypress", function (e) { e.stopPropagation(); }); const btn = document.getElementById("hello-btn"); btn.addEventListener("click", function onClick(e) { console.log("clicked btn"); }); <!DOCTYPE html> <html> <head> <title>Sample</title> <meta charset="UTF-8" /> </head> <body> <div id="app"> <button id="hello-btn">Say hello</button> <input id="user-input" placeholder="enter text" /> </div> <script src="src/index.js"></script> </body> </html> Sin embargo, sugeriría no adjuntar el evento de keypress de tecla en el document . Según MDN, está en desuso: https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event#browser_compatibility .
La mejor manera aquí sería rastrear el modalOpenState en una variable booleana. Cuando se abra el modal, configúrelo en true y false cuando esté cerrado. Y cuando esté escuchando el evento de keypress de tecla, verifique si modalOpenState es verdadero o falso, y luego redirija según corresponda.
Nota: Como también dice el comentario de Zameer, el evento 'presionar tecla' está en desuso y puede dejar de funcionar en cualquier momento. MDN sugiere reemplazarlo con beforeinput o keydown event según el requisito.