在Angular 7中,要解决模糊和点击不能同时工作的问题,可以通过以下步骤实现:
Renderer2
来处理事件的绑定和解绑。import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
selector: '[blurClick]'
})
export class BlurClickDirective {
constructor(private el: ElementRef, private renderer: Renderer2) { }
@HostListener('click', ['$event'])
onClick(event: Event): void {
event.stopPropagation();
}
@HostListener('document:click', ['$event'])
onDocumentClick(event: Event): void {
// 在这里处理点击事件的逻辑
// 如果不需要继续模糊处理,可以选择注释掉下面这行代码
this.renderer.removeClass(this.el.nativeElement, 'blur');
}
@HostListener('document:keydown.escape', ['$event'])
onKeydownEscape(event: KeyboardEvent): void {
// 在这里处理按下Escape键的逻辑
// 如果不需要继续模糊处理,可以选择注释掉下面这行代码
this.renderer.removeClass(this.el.nativeElement, 'blur');
}
}
.blur {
filter: blur(5px);
}
通过以上步骤,可以实现在点击事件中取消模糊效果,并且同时保留了模糊和点击事件的功能。