Angular中event.target.blur()在移动端不生效问题咨询

实现按钮点击后自动失焦、避免按钮持续保留焦点状态的逻辑，桌面端运行完全正常，但在iOS、Android移动端设备上测试不生效，尝试将监听的click事件替换为touchstart/touchend事件仍未解决问题。
原有实现代码如下：

this.renderer.listen('document', 'click', (event) => {
  if (event.target.nodeName === 'BUTTON') {
    event.target.blur();
  } else if (event.target.parentNode.nodeName === 'BUTTON') {
    event.target.parentNode.blur();
  }
});

• 元素匹配逻辑缺陷：仅判断事件目标本身、以及目标的直接父节点是否为按钮，一旦按钮内嵌套多层子元素（比如图标、span文本标签、svg图标等），就无法定位到目标按钮，blur逻辑根本不会触发。
• 执行时序冲突：移动端浏览器的事件流中，元素获得焦点的时机在click/touchend事件回调执行完成之后，同步调用blur()后，浏览器会继续执行默认逻辑把焦点重新绑定到按钮上，导致失焦操作无效。
• 事件兼容不足：部分移动端定制WebView中，单一事件监听无法覆盖所有点击场景，容易出现时机错配。

1. 优化按钮定位逻辑 #

实现向上遍历查找最近按钮元素的方法，替代原有的单层父节点判断，支持多层嵌套的按钮结构：

/**
 * 从事件目标向上遍历，找到最近的button元素
 */
const getClosestButton = (target: EventTarget | null): HTMLButtonElement | null => {
  let node = target as HTMLElement | null;
  while (node && node !== document.body) {
    if (node.tagName === 'BUTTON') return node as HTMLButtonElement;
    node = node.parentElement;
  }
  return null;
};

2. 修正blur执行时机 #

把失焦逻辑放到requestAnimationFrame或者setTimeout回调中执行，等浏览器完成默认的焦点绑定流程后再触发失焦，避免被浏览器默认行为覆盖。

3. 多事件绑定覆盖移动端场景 #

同时监听click和touchend事件，覆盖不同移动端WebView的事件触发逻辑，增加兜底判断避免重复执行。

完整修复代码 #

// 绑定两类事件覆盖全场景
const listenEvents = ['click', 'touchend'];
listenEvents.forEach(eventName => {
  this.renderer.listen('document', eventName, (event: Event) => {
    const targetBtn = getClosestButton(event.target);
    if (!targetBtn) return;

    // 下一帧执行失焦，避开浏览器默认焦点设置时序
    requestAnimationFrame(() => {
      targetBtn.blur();
    });

    // 极端场景兜底：如果rAF执行后焦点仍在按钮上，再执行一次失焦
    setTimeout(() => {
      if (document.activeElement === targetBtn) {
        targetBtn.blur();
      }
    }, 0);
  });
});

可选CSS辅助优化 #

可以配合CSS移除移动端默认的点击高亮效果，进一步优化交互体验：

button {
  /* 移除iOS/安卓点击时的默认半透明高亮 */
  -webkit-tap-highlight-color: transparent;
  /* 禁用iOS长按按钮弹出系统菜单 */
  -webkit-touch-callout: none;
}

内容的提问来源于stack exchange，提问作者Osvaldo Fernández