当标签单击为 RxJS 流时 HTML 焦点和模糊答案

【问题标题】：HTML focus and blur when label clicked as RxJS stream当标签单击为 RxJS 流时 HTML 焦点和模糊
【发布时间】：2022-08-16 01:00:53
【问题描述】：

我有一个 HTML 标签和 HTML 输入复选框，我需要一个流重点和模糊单击标签时行为正确的事件。

（在实际应用程序中，有一个 Bootstrap 组件由于样式而隐藏输入 - 因此交互不是与复选框本身，而是与样式为复选框的标签（复选框本身是不可见的，不透明度 = 0）。）

问题是，当我单击标签时，真正的复选框会失去焦点（1）（如果它以前有焦点），之后它会再次获得焦点（2）。所以它会产生几个事件模糊和焦点。我需要摆脱它们。这只发生在单击标签时。

我不明白为什么会发生这种情况，因为标签不应该是可聚焦的。

例子：

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

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\'));

点击标签会产生两个事件：

首先点击标签：

blur // 标签获得焦点？
focus // 复选框重新获得焦点

第二次点击标签：

blur // 标签获得焦点？
focus // 复选框重新获得焦点

...

我想获得一个焦点和模糊的 RxJS 流，就像单击真正的复选框一样。

这是stackblitz 演示。

标签： angular rxjs focus blur

【解决方案1】：

您的问题与 rxjs 无关，而是与基本 JS 事件有关。 blur 在 mousedown 上触发。

只需 preventDefault 参加该活动，以防止标签窃取焦点！

fromEvent(label, 'mousedown').subscribe((event) => event.preventDefault());

【讨论】：