Angular中div的(click)事件生效但(blur)(focus)等事件不触发怎么办

默认 <div> 属于非交互类元素，没有内置的可聚焦属性，无法进入焦点状态，因此你绑定的 focus、blur、focusout 事件本身就没有触发的前提。click 事件不需要元素处于聚焦状态即可触发，所以点击div时只有click日志正常输出。

• 首先给div添加tabindex属性开启可聚焦能力：
  可修改你的div代码为以下形式：

  <div 
    tabindex="0"
    (blur)="onBlur()" 
    (focus)="onFocus()" 
    (click)="click()" 
    (focusout)="focusOut()"
  >
  

  tabindex="0" 表示该元素可以通过tab键导航聚焦，也支持点击聚焦；如果不需要支持tab键导航，可以设置为tabindex="-1"，仅支持代码/点击触发聚焦。
• 验证聚焦状态是否正常：添加tabindex后先点击div，查看控制台是否输出onFocus日志，只有onFocus能正常触发的前提下，后续点击其他区域才会触发失去焦点的相关事件。
• 排查全局事件是否阻止了焦点转移：检查是否有全局绑定的mousedown/mouseup事件调用了preventDefault()，这类操作会阻止点击其他区域时的默认焦点转移逻辑，导致div的失焦事件无法触发。
• 区分事件冒泡差异：blur事件本身不支持冒泡，focusout支持冒泡，如果你后续要在父元素监听子元素的失焦事件，优先使用focusout即可。
• 验证最终效果：完成上述配置后，点击div会依次输出onFocus、click，点击页面其他区域会依次输出focusOut、onBlur。

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