手记

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

    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阻止事件冒泡的方式你学会了吗,还有疑问的同学可以评论区留言~

0人推荐
随时随地看视频
慕课网APP