keyup事件监听器无法正常触发空格键绑定的按钮点击问题如何解决

问题根源 #

• 原有代码存在判断逻辑错误：直接将事件对象event和键码数值32做相等判断，该条件永远不会成立。
• 之前聚焦按钮时按空格可触发点击是浏览器自带的默认行为（聚焦状态的可交互元素按空格/回车会自动触发点击事件），和你编写的判断逻辑无关。按钮失焦后浏览器默认行为不再触发，你的代码逻辑又始终不生效，就会出现功能失效的问题。
• 删除if判断后所有按键都会执行changeColor.click()，所以功能恢复正常。

解决方案 #

使用正确的按键属性做判断即可，推荐优先使用event.code做判断（不受键盘布局影响，兼容性覆盖绝大多数现代浏览器）：

document.addEventListener("keyup", (event) => {
    if (event.code === 'Space') {
        // 可选添加：阻止按空格键触发页面滚动的默认行为
        event.preventDefault();
        changeColor.click();
    }
})

如果需要兼容老旧浏览器，也可以使用keyCode属性做判断：

document.addEventListener("keyup", (event) => {
    const currentKeyCode = event.keyCode || event.which;
    if (currentKeyCode === 32) {
        event.preventDefault();
        changeColor.click();
    }
})

内容的提问来源于stack exchange，提问作者Amr Al-Gendi