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

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>

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

.

但是当我也单击蓝色编辑按钮时它会触发：

.

Answer 1

我设法通过将图像和 headers 包装在 div 中并将点击事件添加到 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>

Answer 2

它调用了事件传播。这意味着当你触发一个事件时，parents 的所有相同事件都将被执行。为了防止这种情况，您可以这样做，例如：

在这个标签中，当你执行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() 阻止 parent 点击事件的执行。

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

Button click event inside clickable ion-card executes parent event too

event-propagation

dom-events

stoppropagation

ionic-framework

angular