Angular中blur事件阻止button的click事件，求有效解决方案

嵌套子组件里的input绑了blur事件：

<input (blur)="onBlur()" ...>

它的祖先组件里有个绑了click事件的按钮，但这个click会被input的blur影响，触发不了。试过把click改成mousedown能解决，但体验有点变；也试过在onBlur()里加event.preventDefault()，没用，求其他办法。

1. 延迟执行blur的逻辑 #

用setTimeout把blur里的业务逻辑推迟到下一个事件循环再跑，让click先触发：

onBlur(event: FocusEvent) {
  setTimeout(() => {
    // 这里放你原来的blur处理代码
    console.log('处理input失焦');
  }, 0);
}

为啥有用？因为blur是同步触发的，而setTimeout会把回调放到宏任务队列，等当前所有同步事件（包括click的触发逻辑）跑完再执行。

2. 判断失焦原因，针对性跳过逻辑 #

通过event.relatedTarget看是不是因为点了目标按钮才导致input失焦，如果是就跳过blur的核心逻辑，让click正常跑：

onBlur(event: FocusEvent) {
  // 换成你按钮的选择器，或者用组件里的ViewChild获取实例
  const targetBtn = document.querySelector('#your-button-id');
  // 检查失焦后焦点是不是落到了目标按钮上
  if (event.relatedTarget === targetBtn) {
    return;
  }
  // 原来的blur处理逻辑
}

3. 用mousedown+mouseup模拟原生click体验 #

如果不想改click但又要规避顺序问题，可以给按钮同时绑mousedown和mouseup，只有用户完整完成点击（按下再抬起）才执行逻辑：

private isMousePressed = false;

onBtnMouseDown() {
  this.isMousePressed = true;
}

onBtnMouseUp() {
  if (this.isMousePressed) {
    this.onClick(); // 执行原来的click逻辑
    this.isMousePressed = false;
  }
}

模板里这么写：

<button (mousedown)="onBtnMouseDown()" (mouseup)="onBtnMouseUp()" ...>

这样既绕开了blur的事件顺序问题，体验和原生click差不多。

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