它被称为事件传播。它意味着当你触发一个事件时，父事件的所有相同事件都将被执行。为了防止这种情况，你可以做一些类似这样的事情，例如：
在此标记中，当您执行complete()函数时，也会传递$事件：

<ion-button size="medium" style="width: 30%;" color="success" (click)="complete($event, item)">

在complete（）函数中添加以下行：

function complete(event, item) {

  //your code

  event.stopPropagation();
}

**stopPropagation（）**防止执行父单击事件。

我设法解决了这个问题，方法是将图像和标题 Package 在div中，并将click事件添加到div中。

//html
  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let item of exercises">
        <ion-card class="exercise-card">
          <div (click)="openModal(item.id)">
            <img [src]=item.image class="image-card">
            <h3 style="font-weight: bold;">{{item.name}}</h3>
            <h5>{{item.sets}} sets of {{item.reps}} reps and {{item.remarks}}</h5>
            <h6>{{item.date | date: 'dd/MM/yyyy'}} ({{item.time}})</h6>
            <br>
          </div>
          <div style="text-align: center;">
            <ion-button size="medium" style="width: 30%;" color="success" (click)="complete(item)">
              <ion-icon slot="icon-only" name="checkmark-outline"></ion-icon>
            </ion-button>
            <ion-button size="medium" type="submit" style="width: 30%;" [routerLink]="['/edit-exercise', item.id]">
              <ion-icon slot="icon-only" name="create-outline"></ion-icon>
            </ion-button>
            <ion-button size="medium" style="width: 30%;" color="danger" (click)="delete(item)">
              <ion-icon slot="icon-only" name="trash-bin"></ion-icon>
            </ion-button>
          </div>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>