聚焦和模糊在Angular中不起作用

Question

我试图检测用户单击div的时间。我在此代码中添加了component.html

  <div class="h unselected" contenteditable="false" (mousedown)="mousedown($event)" (mouseup)="mouseup($event)" (focusout)="focusout($event)" (blur)="focusout($event)">
    Hello
  </div>

component.ts已实现focusout（e）（除其他事项外）

focusout(e){
    console.log("f out");
  }

当我在外部单击时，该方法永远不会触发Hello div。这是为什么？我正在使用Chrome。

Answer 1

tabindex在div上设置。该tabindex属性表明如果元素可重点关注。

<div tabindex="-1" class="h unselected" contenteditable="false" (mousedown)="mousedown($event)" (mouseup)="mouseup($event)" (focusout)="focusout($event)" (blur)="focusout($event)">
    Hello
  </div>

为什么-1呢

根据mozilla网络文档：

负值（通常为tabindex =“-1”）意味着该元素应该是可聚焦的，但不能通过顺序键盘导航来访问。在使用JavaScript创建可访问的窗口小部件时最有用。

tabindex =“ 0”表示该元素在顺序键盘导航中应该是可聚焦的，但是其顺序由文档的源顺序定义。

正值表示该元素在顺序键盘导航中应该是可聚焦的，其顺序由数字的值定义。也就是说，tabindex =“ 4”将集中在tabindex =“ 5”之前，但在tabindex =“ 3”之后。如果多个元素共享相同的正tabindex值，则它们相对于彼此的顺序将遵循它们在文档源中的位置。