Angular 7的模糊和点击不能同时工作。
创始人
2024-10-17 01:00:28
0

在Angular 7中,要解决模糊和点击不能同时工作的问题,可以通过以下步骤实现:

  1. 创建一个指令,用于处理模糊和点击事件的冲突。在该指令中,使用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');
  }
}
  1. 在组件的模板中使用该指令,并添加相应的样式。
  1. 在组件的样式文件中,定义模糊的样式。
.blur {
  filter: blur(5px);
}

通过以上步骤,可以实现在点击事件中取消模糊效果,并且同时保留了模糊和点击事件的功能。

相关内容

热门资讯

做出回应!微乐贵阳捉鸡麻将挂软... 做出回应!微乐贵阳捉鸡麻将挂软件,果然真的是有辅助神器(有挂秘诀)-哔哩哔哩1、打开软件启动之后找到...
反观!九游破解辅助插件,都是真... 反观!九游破解辅助插件,都是真的有辅助神器(有挂秘籍)-哔哩哔哩九游破解辅助插件能透视中分为三种模型...
据文件显示!科米台州麻将辅助,... 据文件显示!科米台州麻将辅助,真是有挂辅助app(竟然有挂)-哔哩哔哩1、每一步都需要思考,不同水平...
今天上午!赣湘互娱挂,总是是有... 今天上午!赣湘互娱挂,总是是有辅助修改器(有挂详情)-哔哩哔哩1、在赣湘互娱挂插件功能辅助器技巧中,...
来临!广西友乐解码器辅助器,原... 来临!广西友乐解码器辅助器,原来真的是有辅助脚本(真的有挂)-哔哩哔哩1.广西友乐解码器辅助器 选牌...
来临!新天道辅助脚本,确实有挂... 来临!新天道辅助脚本,确实有挂辅助下载(有挂秘诀)-哔哩哔哩1、金币登录送、破产送、升级送、活动送。...
近期!青橙竞技卡五星辅助,好像... 近期!青橙竞技卡五星辅助,好像真的是有辅助脚本(竟然有挂)-哔哩哔哩1、用户打开应用后不用登录就可以...
据相关数据显示!小程序微乐游戏... 据相关数据显示!小程序微乐游戏辅助,原来真的有辅助挂(有挂实锤)-哔哩哔哩该软件可以轻松地帮助玩家将...
据统计!人皇大厅控制牌型,竟然... 据统计!人皇大厅控制牌型,竟然有挂辅助平台(有挂实锤)-哔哩哔哩1、人皇大厅控制牌型辅助软件下载优化...
现场直击!打哈儿辅助,竟然是有... 现场直击!打哈儿辅助,竟然是有辅助平台(有挂实锤)-哔哩哔哩1)打哈儿辅助辅助插件:进一步探索打哈儿...