Angular中点击子元素输入框时意外触发focusout事件的问题

问题根源 #

外层div设置了tabindex="0"，因此它成为了可聚焦元素。当点击内部input输入框时，焦点会从外层div转移到input上，此时div失去焦点，自然触发focusout事件。而需求是焦点在div内部切换时不触发该事件，核心是要判断失去焦点后，新焦点是否仍属于当前div的子元素。

解决方法 #

修改moveoutFromTagArea方法，利用FocusEvent的relatedTarget属性判断新焦点元素是否是div的后代：

moveoutFromTagArea(event: FocusEvent) {
  const currentDiv = event.currentTarget as HTMLElement;
  // 检查新焦点元素是否在当前div内部
  if (event.relatedTarget && currentDiv.contains(event.relatedTarget as Node)) {
    return; // 焦点仍在内部，不执行后续逻辑
  }
  // 这里写你原本要执行的离开逻辑
}

补充说明 #

• relatedTarget属性会指向焦点转移后的目标元素，如果点击的是页面空白处，该值为null，此时会正常执行离开逻辑。
• 不需要修改模板代码，只需要调整组件中的事件处理方法即可。

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