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

【问题标题】：Angular - how handle click event inside other clickable containerAngular - 如何处理其他可点击容器内的点击事件
【发布时间】：2020-09-03 19:55:42
【问题描述】：

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

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

【问题讨论】：

你可以只使用css属性z-index。如果您正在执行 "`，它将起作用。将调用类似组件上的方法而不是容器方法（不会被阻止但从未调用）

标签： angular events onclick

【解决方案1】：

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

像这样将 $event 传递给onLikeClicked：

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

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

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

【讨论】：

【解决方案2】：

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

试试下面的

控制器

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

【讨论】：

【解决方案3】：

您必须停止事件传播。这不是特定于角度的，只是基本的 javascript。正如stopImmediatePropagation() 的官方文档所述：

调用此方法可防止事件在当前事件侦听器完成运行后到达任何已注册的事件侦听器，并且当在树中调度时，还可以防止事件到达任何其他对象。

component.html

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

component.ts

export class Component {

  onContainerClick(): void {
    // do something
  }

  onLikeClicked(event: MouseEvent): void {
    event.stopImmediatePropagation();
    // do something
  }
}

【讨论】：