如何在指定DOM元素中捕获组合按键事件？以Ctrl+H为例

针对你给出的场景，我来一步步帮你实现仅在id="k"的<div>上捕获Ctrl+H组合键的需求，同时先纠正一个小问题：你代码里两个<input>用了相同的id="text"，这不符合HTML规范（id必须全局唯一），我会在示例里修正这个问题。

方法一：让目标div可聚焦并直接绑定事件 #

默认情况下，<div>不是可交互元素，无法直接接收键盘事件，所以我们需要给它添加tabindex属性让它可以被聚焦，之后就能直接绑定键盘事件了：

调整后的HTML #

<div id="k" tabindex="0"><input id="text-k" type="text"></div>
<div id="j"><input id="text-j" type="text"></div>

JavaScript实现 #

const kContainer = document.getElementById('k');

kContainer.addEventListener('keydown', (event) => {
  // 检测Ctrl键是否按下，同时按键为H（注意e.key返回的是小写的h）
  if (event.ctrlKey && event.key === 'h') {
    // 阻止浏览器默认的Ctrl+H行为（比如触发历史后退）
    event.preventDefault();
    // 这里执行你的业务逻辑
    console.log('Ctrl+H 在#k容器上触发啦！');
  }
});

关键点说明 #

• tabindex="0"：让<div>可以通过点击或Tab键获得焦点，从而能捕获键盘事件。如果不想让它通过Tab键被选中，可以设置tabindex="-1"，但这样只能通过JavaScript的focus()方法手动让它聚焦。
• 事件冒泡特性：当你点击<div>内部的<input>时，键盘事件会自动冒泡到父级<div>，所以这个绑定也会生效（除非内部元素主动调用stopPropagation()阻止冒泡）。

方法二：使用事件委托（无需修改div的可聚焦状态） #

如果你不想改变<div>的默认状态，可以用事件委托的方式，在全局监听键盘事件，然后判断事件触发的目标是否在#k的范围内：

JavaScript实现 #

document.addEventListener('keydown', (event) => {
  const kContainer = document.getElementById('k');
  // 检查当前触发事件的元素是否属于#k容器的后代（包括容器自身）
  if (kContainer.contains(event.target) && event.ctrlKey && event.key === 'h') {
    event.preventDefault();
    console.log('Ctrl+H 在#k容器范围内触发啦！');
    // 执行你的业务逻辑
  }
});

适用场景 #

这种方式不需要给<div>加任何额外属性，不管用户点击的是<div>本身还是内部的<input>，只要在#k的范围内，就能捕获到Ctrl+H组合键，非常灵活。

内容的提问来源于stack exchange，提问作者Pedro Jose