聚焦和模糊在Angular中不起作用 [英] focusout and blur not working in Angular

问题描述

我正在尝试检测用户何时单击div.我在component.html

I am trying to detect when the user clicks off the div. I added this code in 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)

component.ts has focusout(e) implemented (among other things)

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

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

The method never gets fired when I click outside of the Hello div. Why is that? I am using Chrome.

推荐答案

在div上设置tabindex. tabindex 指示其元素是否可以集中.

Set tabindex on the div. The tabindex indicates if its element can be focused.

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

为什么-1?

Why -1?

根据mozilla网络文档:

According to the mozilla web docs:

负值(通常为tabindex =-1")表示该元素应 可以对焦，但不能通过顺序键盘访问 导航.在创建具有以下功能的可访问窗口小部件时最有用 JavaScript.

A negative value (usually tabindex="-1") means that the element should be focusable, but should not be reachable via sequential keyboard navigation. Mostly useful to create accessible widgets with JavaScript.

tabindex ="0"表示该元素应按顺序可聚焦 键盘导航，但其顺序由文档的来源定义 订单.

tabindex="0" means that the element should be focusable in sequential keyboard navigation, but its order is defined by the document's source order.

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

A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" would be focused before tabindex="5", but after tabindex="3". If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source.

这篇关于聚焦和模糊在Angular中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！