我想在我的 Angular 9 应用程序中设置一个 onblur 事件处理程序，用于当有人离开页面时。我有问题的页面被映射到具有此...的单个组件...
export class HotComponent implements OnInit {
...
onBlur(): void {
console.log("on blur called !!!");
}
在模板中，我设置了这个...
<div (blur)="onBlur()">
<div>
...
</div>
</div>
但是，当我离开加载此页面的浏览器窗口并返回时，我注意到 onblur 处理程序尚未被调用。在 Angular 9 中为页面实现 onblur 事件处理程序的正确方法是什么？
【问题讨论】：
标签： angular event-handling angular9 onblur
Angular有一个叫HostListener的东西，你需要用它！
/**
* Blur
* @param eventName 'focusout' is the key
* @param arguments of type '$event'
*/
@HostListener('focusout', ['$event'])
onFocusout(event) {
// your logic goes here
console.log('on blur called'); // This will get printed on blur
}
【讨论】：
我建议您查看onbeforeunload event。 onblur 事件并不是真正旨在支持您的用例，因为它针对元素的状态更改。您正在尝试做的是拦截浏览器上的历史更改。
WindowEventHandlers mixin 的 onbeforeunload 属性是用于处理 beforeunload 事件的 EventHandler。这些事件在窗口即将卸载其资源时触发。此时，文档仍然可见，事件仍然可以取消。
如其他回复所述，您可以添加事件监听器via Angular's @HostListener annotation：
@HostListener('window:beforeunload')
foo() {
// Do something here
}
【讨论】：
两个问题将解决您的问题。将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
第二个问题是因为有two events happening 作为导航的结果，您需要同时处理这两个问题。对于 firefox，请查看 here 的事件名称。一旦你导入HostListener & HostBinding
<!-- language: typescript -->
// 2
import { Component, HostListener, HostBinding } from '@angular/core';
focus event 焦点和 blur 退出blur event
<!-- 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';
}
另一个选项2：如果你想处理focusOut
<!-- 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);
}
simple working sample 的事件对我有用，请参阅图片下方的控制台日志...它有效。能否请您禁用所有插件并尝试。
【讨论】：
onBlur 和onFocus 不会直接应用于div
无论如何，要解决您的问题，您只需在 visibilitychange 或任何其他组件的构造函数中添加 EventListener 即可。
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
console.log("Browser tab is on blur")
} else {
console.log("Browser tab is on focus")
}
});
【讨论】：