如何阻止HTML Label按空格键触发隐藏Checkbox的click事件？

为关联隐藏HTML Checkbox的Label添加click事件处理器后，在Label上按空格键会触发该Checkbox的click事件，需要阻止这一行为（Checkbox因使用的Bootstrap版本而隐藏）。

HTML代码 #

<body>
  <label for="checkbox" id="label">Click on me, I am Label for <strong>hidden</strong> Checkbox</label>

  <!-- 复选框不可见 -->
  <input type="checkbox" id="checkbox" style="opacity: 0" />

  <!-- 由JavaScript填充内容 -->
  <div id="checkboxValue"></div>
</body>

JavaScript代码 #

import { fromEvent } from 'rxjs';

const checkbox: HTMLInputElement = document.querySelector('#checkbox');
const checkboxValue: HTMLDivElement = document.querySelector('#checkboxValue');

function updateCheckbox() {
  checkboxValue.innerHTML = `Checkbox ${checkbox.checked ? '✔️ (已选中)' : '❌ (未选中)'}`;
}

// 空格键按下时也会触发这个复选框的click事件处理器
fromEvent(checkbox, 'click').subscribe((event) => {
  console.log('checkbox CLICK -------')
  updateCheckbox();
});

updateCheckbox();

复现步骤 #

点击Label元素“Click on me, I am Label for hidden Checkbox”，然后按空格键，可在控制台看到checkbox CLICK -------日志输出，同时复选框的状态会被更新。

解决方案 #

方法1：阻止Label上空格键的默认行为 #

通过监听Label的keydown事件，检测到空格键时直接阻止默认行为，从根源避免触发复选框的click事件：

// 添加这段代码
fromEvent(document.querySelector('#label'), 'keydown').subscribe((event: KeyboardEvent) => {
  if (event.code === 'Space') {
    event.preventDefault();
  }
});

方法2：过滤键盘触发的click事件 #

在复选框的click事件处理器中，仅响应鼠标点击触发的事件，忽略键盘触发的情况：

fromEvent(checkbox, 'click').subscribe((event: MouseEvent) => {
  // 仅当是鼠标点击触发的click事件时执行逻辑
  if (event.detail > 0) {
    console.log('checkbox CLICK -------')
    updateCheckbox();
  }
});

两种方法按需选择即可：方法1彻底阻断了空格键的默认关联行为，方法2则是在事件层面做过滤，保留其他可能的交互逻辑。

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