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()

停止事件的传播来忽略父点击事件

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（） 防止点击事件冒泡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>

希望这会有所帮助！

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

4 个答案: