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