Angular - 如何处理其他可点击容器内的点击事件

Question

我有一个可点击的 div，点击后导航到其他页面。在这个 div 中我想要一个类似的组件。如果用户单击类似按钮，则应执行 onLikeClicked()，但应阻止 onContainerClick()。单击容器内的其他位置应执行 onContainerClick()。如果用户直接单击类似组件，如何阻止 onContainerClick() 事件？

<div class="container" (click)="onContainerClick()">
    <like (click)="onLikeClicked()">
        
    </like>
</div>

Answer 1

您可以使用以下方法停止事件的传播event.stopPropagation();

将 $event 传递给onLikeClicked这样的：

    <like (click)="onLikeClicked($event)">
    </like>

然后在函数中你可以调用event.stopPropagation();

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Answer 2

您可以在元素的单击事件中调用该stopPropagation()函数like来停止事件冒泡。

尝试以下操作

控制器

export class AppComponent  {
  onContainerClick(event) {
    event.stopPropagation();           // <-- also if you want to stop container click event bubbling
    console.log("container clicked");
  }

  onLikeClicked(event) {
    event.stopPropagation();
    console.log('like clicked');
  }
}

模板

<div (click)="onContainerClick($event)" class="container">
  <p (click)="onLikeClicked($event)" class="content">Something inside</p>
</div>

工作示例：Stackblitz