在Angular 9中，如何实现页面的onblur处理程序？

我想在Angular 9应用程序中设置一个

onblur

事件处理程序，以便在有人离开页面时使用。我的页面被映射到一个组件，该组件具有以下功能

导出类HotComponent实现OnInit{
...
onBlur（）：void{
log（“在模糊中调用！！！”；
}

在模板中，我设置了这个

...

---

但是当我离开加载此页面的浏览器窗口并返回时，我注意到没有调用

onblur

处理程序。在Angular 9中为页面实现

onblur

事件处理程序的正确方法是什么？

onblur

和

onFocus

不会应用于

div

directly

无论如何，要解决您的问题，您只需在

app.component

或任何其他组件的构造函数中的

visibilitychange

上添加一个

EventListener

document.addEventListener（“visibilitychange”，（）=>{
if（document.hidden）{
console.log（“浏览器选项卡处于模糊状态”）
}否则{
console.log（“浏览器选项卡处于焦点位置”）
}
});

Angular有一个名为

HostListener

，您需要使用它

/**
*模糊
*@param eventName“focusout”是键
*“$event”类型的@param参数
*/
@HostListener（'focusout'，['$event']））
onFocusout（事件）{
//你的逻辑是这样的
log（'on blur called'）；//这将在blur上打印
}

两个问题将解决您的问题。将

tabindex=“0”

添加到

DIV

中，然后处理以下事件

<!-- language: html -->
// 1
<div  (blur)="onBlur()">  // tabindex="0" gets inserted by HostBinding
// recommend you use an input vs. DIV when user is entering data

处理

focus事件

focus in和

blur

退出

根据需要处理模糊事件

---

随着事件的工作为我，请参阅控制台日志下面的图片…它的工作。您可以请禁用所有插件，并尝试

---

我建议您查看。onblur事件并不是真正为支持您的用例而设计的，因为它以元素的状态更改为目标。您试图做的是拦截浏览器上的历史更改

WindowEventHandlers mixin的onbeforeunload属性是用于处理beforeunload事件的EventHandler。当窗口即将卸载其资源时，将触发这些事件。此时，文档仍然可见，事件仍然可以取消

如其他回复所述，您可以添加事件侦听器：

@HostListener（'window:beforeunload'）
foo（）{
//在这里做点什么
}

我使用的是Firefox，当我单击不同的Firefox选项卡时，这种逻辑似乎有效。但当我选择另一个应用程序并将该应用程序放在桌面的最前端时，这种逻辑不会被调用。当我单击浏览器中的不同选项卡时，这种逻辑似乎有效，但当我切换到不同的应用程序时（在Mac上使用Cmd+tab），它不会被调用（至少在Firefox上）.当您使用Cmd+tab时，您需要了解浏览器得到的是第一个实例化，而不是您正在使用的选项卡。完成后，您需要编写您的逻辑，如果浏览器是forefront，那么hostlistener将工作，如果主机本身不在焦点位置，它将无法正常工作？我不太了解。我需要在哪里应用该命令当有人使用（例如）Cmd+tab导航离开时，您提供的代码或我需要添加什么其他代码来触发hte页面上的onblur事件？关于您的第一个解决方案，我假设其中一个是“onFocus”函数应命名为其他名称b/c您不能有两个具有相同签名的函数命名为相同的函数。无论如何，我将其中一个函数更改为“onFocus2”，但当我将Cmd+tab从浏览器中移出并返回时，它们不仅不会被调用，而且当我单击另一个选项卡并返回到原始选项卡时，它们也不会被调用。（在Mac Firefox上测试）没错，我写它是为了让你了解如何捕获和区分各种事件。我为你更新了示例，并在stackblitz上添加了一个工作框架，通过控制台向你显示我可以看到事件。请关闭你的插件，然后再试一次。默认情况下，div甚至没有接收焦点，因此

blur

将被禁用无用。有关详细信息，请参阅。我想您可能正在查找

窗口。onbeforeuload

。有关详细信息，请参阅。关于

主机侦听器

的最上等答案正是您将如何观看此事件。

<!-- language: typescript -->
// 2
import { Component, HostListener, HostBinding } from '@angular/core';

<!-- language: typescript -->
// 3              -- you should be good :)
export class HotComponent { 

focusOutFunction() {
 console.log('focusOutFunction called');
 .. your logic here
 }

focusFunction() {
 console.log('focusFunction called');
 ..
 }

blurFunction()
 {
  console.log('blur called');
  ..
 }

   // you dont need to manually add it to HTML if you do this.
   @HostBinding('attr.tabindex') tabindex = '0';
}

  <!-- language: html -->
  <input tabindex="0" type="text" (focusout)="onFocusOutEvent($event)" />

  // in your component explicitly handle the event 
  onFocusOutEvent(event: any){
    console.log(event.target.value);
  }