单击离子项 Ionic 4 时是否有不触发复选框的方法？

Question

当我点击一个 ion-item 的标签时，复选框被触发。我想找到一种方法来防止这种情况发生，因为我想在单击标签时触发另一个功能。

我找到了 Ionic 3 的答案：https://forum.ionicframework.com/t/solved-can-i-disable-a-checkbox-from-activating-when-clicking-on-a-label/95120 但是，它不适用于 Ionic 4。

<ion-item>
    <ion-icon [name]="setIconDoc(item.document.documentType)" color="primary" (click)="editDocument(item.document)"></ion-icon>
        <ion-label padding-start color="none" (click)="editDocument(item.document)"> {{ item.document.customer.name }}
        </ion-label>
        <ion-checkbox slot="end" color="success" [(ngModel)]="item.isChecked"> 
   </ion-checkbox>
</ion-item>

我想要两种行为： - 当点击复选框时只触发复选框。 - 单击标签或图标时打开模式以编辑我的文档。

Answer 1

我刚刚遇到了类似的问题，并通过使用 ion-item 的插槽在 ionic 4 中找到了一个很好的解决方案。

<ion-item lines="full">
  <ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>

  <ion-label slot="start" (click)="labelClicked()">
    This is a separately clickable label
  </ion-label>
  <ion-checkbox slot="end"></ion-checkbox>
</ion-item>

说明

单击复选框时不会触发 ion-item 的 start 插槽中的元素。
start槽默认没有底边框，所以必须在ion-item;

lines="full"

请注意，主插槽仍然以较大的宽度呈现。这可能会导致一些隐藏的内容。在这种情况下，这可以通过 css 这样的调整来解决。

ion-item ion-label {
  overflow: visible;
}

Answer 2

我找到了另一个解决方案。我在项目中添加了另一个隐藏的复选框。

<ion-item *ngFor="let task of tasks;let i of index;"  padding margin>
  <ion-checkbox slot="start" color="success" (click)="DeleteTask($event, task)"></ion-checkbox>
  
  <!-- another checkbox otherwise item clicks triggers checkbox click -->
  <ion-checkbox hidden=true ></ion-checkbox>

<ion-label >
     {{task.Name}}
  </ion-label>
  <ion-reorder slot="end"></ion-reorder>

单击离子项 Ionic 4 时是否有不触发复选框的方法？

Is there a way of not trigger checkbox when clicking in a ion-item Ionic 4?

ionic-framework

ionic4

说明