点击Checkbox Label时，如何消除RxJS中多余的focus/blur事件？

我有一个HTML label和HTML input checkbox，需要构建focus和blur事件的RxJS流，确保点击label时行为正常。实际项目中使用Bootstrap组件，出于样式需求隐藏了input——交互对象是样式化为复选框的label，checkbox本身设为opacity=0不可见。

问题在于：点击label时，若checkbox原本已获取焦点，会先失去焦点（触发blur事件），随后重新获取焦点（触发focus事件），产生一对多余事件，且仅点击label时会出现此情况。我不理解原因，因为label本不应是可聚焦元素。

示例代码 #

HTML代码 #

<label for="checkbox">Click On CheckBox Label</label>
<input type="checkbox" id="checkbox" />

JS代码 #

import { of, map, fromEvent } from 'rxjs';

const element = document.querySelector('#checkbox');

fromEvent(element, 'focus').subscribe((event) => console.log('focus'));
fromEvent(element, 'blur').subscribe((event) => console.log('blur'));

事件表现 #

点击label时会重复触发以下事件：

• 首次点击label：
  • blur // 疑似label获取焦点导致checkbox失焦
  • focus // checkbox重新获取焦点
• 再次点击label：
  • blur // 疑似label获取焦点导致checkbox失焦
  • focus // checkbox重新获取焦点
• ……

期望得到与直接点击checkbox时一致的RxJS focus/blur事件流。

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