Tengo una página con múltiples botones. Cuando presiono la barra espaciadora, ejecuta la función. Pero si presiono el botón x y nuevamente la barra espaciadora, ejecuta la función del botón x. ¿Cómo puedo arreglar eso?
const x = str => console.log(str); const spacebar = () => console.log('space'); document.addEventListener("keydown", function(event) { if (event.key === '1') { x(event.key); } if (event.key === ' ') { spacebar(); } }) <button onclick="x('button')"> x </button> <button onclick="spacebar()"> spacebar </button>Utilice preventDefault() para evitar el comportamiento predeterminado del navegador. Debido a que su botón x tiene el foco, se ejecuta nuevamente al presionar espacio, por ejemplo, en Google Chrome.
const x = str => console.log(str); const spacebar = () => console.log('space'); document.addEventListener("keydown", function(event) { if (event.key === '1') { x(event.key); } if (event.key === ' ') { event.preventDefault(); spacebar(); } }) <button onclick="x('button')"> x </button> <button onclick="spacebar()"> spacebar </button>Porque su código se ejecuta en keydown, y la barra espaciadora presiona el botón x en keyup. Puede eliminar el foco de cualquier otra cosa en el documento, solo para asegurarse de que el espacio no haga otra cosa.
const x = str => console.log(str); const spacebar = () => console.log('space'); document.addEventListener("keydown", function(event) { if (event.key === '1') { x(event.key); } if (event.key === ' ') { spacebar(); document.activeElement.blur(); // I just added this line } }) <button onclick="x('button')"> x </button> <button onclick="spacebar()"> spacebar </button>