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