为了账号安全,请及时绑定邮箱和手机立即绑定

angular阻止事件冒泡,常用的两种方式

标签:
AngularJS

    angualr阻止事件冒泡一般可以通过显示阻止和指令阻止两种方式实现,今天就来给大家详细说一说:

    显示阻止就是每次都手动调用stopPropagation,Angular事件绑定会通过名叫 $event的事件对象传递关于此事件的信息,如果没有引用其他的东西,一般情况下$event就是DOM事件对象,

<div class="one" (click)="one($event)">

<div class="two" (click)="two($event)">

<!--方式1-->

<div class="three" (click)="three($event)" ></div>

<!--方式2 通过自定义指令-->

<!--<div class="three" (appClickStop)="three($event)" ></div>-->

</div>

</div>

    显示阻止:

  one(event:Event) {

    console.log("一被点击了");

  }

  two(event:Event) {

    console.log("二被点击了");

  }

  three(event:Event) {

  // 每次点击都手动调用stopPropagation方法

    event.stopPropagation();

    console.log("三被点击了");

  }

    显然,如果页面中出现事件冒泡的地方比较多,显示阻止就不太好了,自定义指令就很有必要了

    指令阻止:

import { Directive, ElementRef, Renderer2, Output, EventEmitter } from '@angular/core';


@Directive({

  selector: '[appClickStop]'

})

export class ClickStopDirective {


  constructor(

    private element: ElementRef,

    private renderer: Renderer2

  ) { }

  @Output("appClickStop")

  stopPropEvent = new EventEmitter();


  // Function和箭头函数均一样

  unsubscribe: () => void;


  ngOnInit() {

    this.unsubscribe = this.renderer.listen(

      this.element.nativeElement, 'click', (event) => {

        // 阻止事件冒泡,event是DOM对象

        event.stopPropagation();

        // 阻止之后要将对象再发射出去

        this.stopPropEvent.emit(event);

      });

  }


  ngOnDestroy() {

    this.unsubscribe();

  }


    好啦,以上两种angular阻止事件冒泡的方式你学会了吗,还有疑问的同学可以评论区留言~

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消