如果单击div中的按钮，则忽略div单击

Question

我有一个带有按钮的div，它使div最小化。 如果单击div内的其他任何位置，它将加载有关div的详细信息。 但是，如果最小化div，我不想加载详细信息。 这是我的代码：

<div (click)="showDetails(key)" *ngFor="let key of keys">
    <button (click)="minimize(key)">Minimize</button>
    <span>The rest of the content is here</span>
</div>

触发最小化后，我想忽略showDetails。

Answer 1

我目前无法测试，但是您可以尝试的是

(click)="minimize(key, $event)"

在你的组件中

minimize(key, event) {
  event.preventDefault();
  event.stopPropagation();
}

尝试其中任何一个，看看效果如何！

Answer 2

您要做的是通过使用stopPropagation()停止事件的传播来忽略父click事件。

html代码：

<div (click)="showDetails(key)" *ngFor="let key of keys">
    <button (click)="minimize(key,$event)">Minimize</button>
    <span>The rest of the content is here</span>
</div>

ts代码：

minimize(key,event){
       event.stopPropagation();
}

Answer 3

使用event.stopPropagation（）来防止click事件使DOM冒泡。

Answer 4

我在这里所做的工作非常简单，您无需创建函数/方法。

<div (click)="showDetails(key)" *ngFor="let key of keys">
    <button (click)="$event.stopPropagation()">Minimize</button>
    <span>The rest of the content is here</span>
</div>

希望这可以帮助！