angular6 点击子元素，阻止事件冒泡 event.stopPropagation()

可以选择在html或ts中处理，本质都是一样的

event.stopPropagation() 可以阻止事件冒泡到父元素，目前多用它来处理。
event.cancelBubble 已废弃，该特性已经从 Web 标准中删除

1. html中处理
event.cancelBubble

<div class="parent" (click)="onClickParent()">
  <span class='child' (click)="onClickChild($event);$event.cancelBubble=true;">   </span>
</div>

event.stopPropagation()

 <div class="parent" (click)="onClickParent()">
      <span class='child' (click)="onClickChild($event);$event.stopPropagation()"></span>
</div>

2. ts中处理
event.cancelBubble

html中调整为

<div class="parent" (click)="onClickParent()">
  <span class='child' (click)="onClickChild($event)">   </span>
</div>

onClickChild(e) {
   e.cancelBubble = true;
 }

event.stopPropagation()
html中调整为

<div class="parent" (click)="onClickParent()">
      <span class='child' (click)="onClickChild($event)"></span>
 </div>

onClickChild(e) {
    e.stopPropagation();
}

可以学习一下相关知识
参考: event.stopPropagation