Question

我正在创建一个离子应用程序，该应用程序会在单击卡片时触发模式，我面临的问题是，当我单击卡片上的按钮时，模式也会打开，如何阻止这种情况发生。我对任何解决方法都持开放态度，因为我已经坚持了一段时间。下面是一些有用的代码和图片：

//html
  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let item of exercises">
        <ion-card class="exercise-card" (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 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>

模态仅在以下情况下触发：单击此页面上的卡片：

。

但是当我也点击蓝色的编辑按钮时，它就会触发：

here 。

Answer 1

它称为事件传播。这意味着当您触发事件时，将执行所有相同的父事件。为了防止这种情况，您可以执行以下操作：

在此标记中，当您执行complete()函数时，也传递$ event：

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

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

function complete(event, item) {

  //your code

  event.stopPropagation();
}

stopPropagation（）阻止执行父click事件。

Answer 2

我设法通过将图像和标题包装在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>

可点击离子卡内的按钮点击事件也执行父事件

2 个答案: