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

在div上设置tabindex。 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 =＆＃34; -1＆＃34;）表示该元素应该   是可聚焦的，但不应通过顺序键盘访问   导航。用于创建可访问的小部件非常有用   的JavaScript。

的tabindex =＆＃34; 0＆＃34;表示元素应该按顺序聚焦   键盘导航，但其顺序由文档的源定义   顺序。

正值表示元素应按顺序聚焦   键盘导航，其顺序由值定义   数。也就是说，tabindex =＆＃34; 4＆＃34;将在tabindex =＆＃34; 5＆＃34;之前集中注意力，   但是在tabindex =＆＃34; 3＆＃34;之后。如果多个元素共享相同的正面   tabindex值，它们相对于彼此的顺序遵循它们   在文件来源中的位置。

Answer 2

默认情况下并非所有元素都支持聚焦。 div就是其中之一。

如果任何元素具有tabIndex属性，则可以支持对焦。

所以我会尝试：

<div tabindex="-1" ...></div

<强> Plunker Example

查看有关tabindex https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

的详细信息

焦点和模糊无法在Angular

2 个答案: