可以选择在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