无法在section元素内监听按键事件的技术求助

问题分析 #

你当前的代码无效，核心原因是section这类普通块级元素默认无法获取焦点，键盘事件只会触发在拥有焦点的元素上，所以直接给section绑定keyup事件不会生效。

解决方案 #

1. 让section具备获取焦点的能力 #

先给HTML中的section添加tabindex属性，这样它就能被点击或通过Tab键选中获取焦点：

<section id="main-section" tabindex="0">
    <h1>Hello World!</h1>
</section>

tabindex="0"表示元素遵循页面默认的Tab导航顺序，不会干扰原有页面的可访问性。

2. 绑定键盘事件并控制响应逻辑 #

有两种简洁的实现方式：

方式一：基于焦点状态动态绑定/移除事件

这种方式更高效，只在元素激活时监听键盘事件：

const targetSection = document.querySelector('#main-section');

targetSection.addEventListener('focus', () => {
    // 定义键盘事件处理函数
    const handleKeyUp = (e) => {
        console.log(e.code);
        // 这里可以添加你的快捷键逻辑
    };

    // 绑定键盘事件
    targetSection.addEventListener('keyup', handleKeyUp);

    // 元素失去焦点时移除事件监听
    targetSection.addEventListener('blur', () => {
        targetSection.removeEventListener('keyup', handleKeyUp);
    }, { once: true }); // 确保blur事件只执行一次，避免重复绑定
});

方式二：全局监听+焦点判断

如果不想频繁操作事件绑定，也可以在全局监听键盘事件，然后判断当前焦点是否在目标区域内：

const targetSection = document.querySelector('#main-section');

document.addEventListener('keyup', (e) => {
    // 检查当前焦点是否在目标section或其子元素上
    if (targetSection.contains(document.activeElement)) {
        console.log(e.code);
        // 执行你的快捷键逻辑
    }
});

3. 优化视觉体验（可选） #

默认的焦点边框可能不符合页面风格，可以用CSS自定义焦点样式：

#main-section:focus {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
    /* 也可以用box-shadow替代outline */
    /* box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); */
}

内容的提问来源于stack exchange，提问作者Umar Zahid