Estoy creando un juego y hay una tabla de clasificación. Quiero que el usuario pueda alternar la tabla de clasificación presionando la tecla TAB . Aquí está mi código:
keysPressed = {}; if(keysPressed[KEY_TAB]){ if(leaderboard.style.display == 'none'){ $(leaderboard).fadeIn(100); } else { $(leaderboard).fadeOut(100); } keysPressed[KEY_TAB] = false; } document.addEventListener('keydown', (event) => { keysPressed[event.key.toLowerCase()] = true; }, false); document.addEventListener('keyup', (event) => { keysPressed[event.key.toLowerCase()] = false; }, false); Nota: la leaderboard de clasificación es solo document.getElementById('leaderboard')
Todo esto funciona bien, pero cada vez que presiono la tecla de tabulación, la página web (estoy usando Chrome) automáticamente selecciona/anula la selección de la barra de URL . ¿Hay alguna manera de evitar que la tecla TAB haga esto, o necesito cambiar a una tecla diferente? Aquí hay una captura de pantalla que demuestra mi problema:
Se prefiere JavaScript , ya que soy bastante nuevo en jQuery , pero estoy dispuesto a hacerlo.
Gracias de antemano ~
Desde MDN:
El método preventDefault() de la interfaz de eventos le dice al agente de usuario que si el evento no se maneja explícitamente, su acción predeterminada no debe tomarse como lo haría normalmente.
El evento continúa propagándose como de costumbre, a menos que uno de sus detectores de eventos llame a stopPropagation() o stopImmediatePropagation(), cualquiera de los cuales finaliza la propagación de inmediato.
Como se indica a continuación, llamar a preventDefault() para un evento no cancelable, como uno enviado a través de EventTarget.dispatchEvent(), sin especificar cancelable: true no tiene ningún efecto.
document.addEventListener('keydown', (event) => { if (event.key == "Tab") { event.preventDefault(); } }, false);