角度 – 离子2手柄点击元素的不同部分

发布时间：2020-12-17 17:42:17 所属栏目：安全来源：网络整理

导读：我有一张带两个按钮的卡片.点击卡片本身应打开详细信息页面： ion-card *ngFor="let appointment of appointmentList" (click)="goToDetails(appointment)" ion-card-header ion-item text-wrap ion-icon start name="ios-medkit-outline"/ion-icon {{appoin

我有一张带两个按钮的卡片.点击卡片本身应打开详细信息页面：

<ion-card *ngFor="let appointment of appointmentList"
                (click)="goToDetails(appointment)">
        <ion-card-header>

          <ion-item text-wrap>
            <ion-icon start name="ios-medkit-outline"></ion-icon>
            {{appointment.ProviderName}}
          </ion-item>
          <ion-row>
            <ion-col width-50>
              <button full ion-button color="secondary" (click)="confirmTrip()"> Confirm</button>
            </ion-col>
            <ion-col width-50>
              <button full ion-button color="danger" (click)="cancelTrip()"> Cancel</button>
            </ion-col>
          </ion-row>
        </ion-card-header>
        <ion-list>
          <ion-item *ngIf="!(appointment.Legs[0].AppTime==='')">
            <ion-label>
              Appointment time
            </ion-label>
            <ion-badge item-right>
              {{appointment.Legs[0].AppTime}}
            </ion-badge>
          </ion-item>

          <ion-item *ngIf="!(appointment.Legs[0].PickUpTime==='')">
            <ion-label>
              Pick up time
            </ion-label>
            <ion-badge item-right> {{appointment.Legs[0].PickUpTime}}</ion-badge>
          </ion-item>

          <ion-item>
            <ion-label>
              Driver status
            </ion-label>
            <ion-badge item-right>{{appointment.Legs[0].Status}}</ion-badge>
          </ion-item>

        </ion-list>
      </ion-card>

单击按钮应触发单独的操作.现在,单击按钮可显示详细信息页面和这些特定操作.是否有任何机制可以将卡片的其他部分与按钮分开？

解决方法

我认为你必须通过使用event.stopPropagation()来检查按钮事件：

// HTML

<ion-item text-wrap>
  <ion-icon start name="ios-medkit-outline"></ion-icon>
    {{appointment.ProviderName}}
  </ion-item>
  <ion-row>
    <ion-col width-50>
      <button full ion-button color="secondary" (click)="confirmTrip($event)"> Confirm</button>
    </ion-col>
    <ion-col width-50>
      <button full ion-button color="danger" (click)="cancelTrip($event)"> Cancel</button>
    </ion-col>
  </ion-row>
</ion-card-header>

//零件

cancelTrip(e){
  // e.preventDefault(); // use this to prevent default event behavior
  e.stopPropagation();

  // code to cancel trip
}

confirmTrip(e){
  // e.preventDefault(); // use this to prevent default event behavior
  e.stopPropagation();

  // code to confirm trip
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!