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

【问题标题】：Button click event inside clickable ion-card executes parent event too可点击离子卡内的按钮点击事件也执行父事件
【发布时间】：2020-06-06 13:18:37
【问题描述】：

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

//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>

模式应该只在以下情况下触发：单击此页面上的卡片：

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

【问题讨论】：

我的回答有用吗？
@MahdiZarei 没有测试它，已经用我自己的答案修复了它
我认为你必须学习一种可以在任何情况下使用的方法。不是虚构的。如果你想学习一些有用的东西，试试我的方法。
@MahdiZarei，尝试了您的解决方案，但不适用于我的示例，另外我在 2 周前提交了此作业

标签： angular ionic-framework dom-events stoppropagation event-propagation

【解决方案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() 阻止父点击事件被执行。

【讨论】：

【解决方案2】：

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

【讨论】：