有没有办法在单击离子项 Ionic 4 时不触发复选框?

问题描述 投票:0回答:4

当我单击离子项目的标签时,会触发复选框。 我想找到一种方法来防止这种情况发生,因为我想在单击标签时触发另一个功能。

我找到了 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>

我希望有两种行为: - 单击复选框时仅触发该复选框。 - 单击标签或图标时,打开一个模式来编辑我的文档。

ionic-framework ionic4
4个回答
3
投票

我刚刚遇到了类似的问题,并通过使用 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>

说明

  • 单击复选框时,不会触发
    start
    ion-item
    插槽中的元素。
  • start
    插槽默认没有下边框,因此必须通过将
    lines="full"
    添加到
    ion-item
    ;
  • 来设置它

请注意,主槽仍然以较大的宽度渲染。这可能会导致一些隐藏内容。在这种情况下,可以通过像这样的 css 调整来解决这个问题。

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

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>

0
投票

您还可以将复选框包装在带槽的 div 中,这似乎会破坏项目和复选框之间的链接。

<ion-item (click)="itemHandler()">
  <ion-icon />
  <ion-label>Label</ion-label>
  <ion-checkbox (click)="checkboxHandler()" />
</ion-item>

如果您将点击处理程序放在离子项目上,那么它将处理来自离子项目上任何位置的点击。但是,这包括来自复选框的点击,因此您必须确保还在复选框点击处理程序中调用

event.stopPropagation()


0
投票

使用 Ionic 8.0.0,我得到了这个解决方案:

<ion-item mode="ios" lines="none">
    <ion-icon slot="start" name="play-circle-outline"></ion-icon>

    <a href="#">Item label</a>

    <ion-button slot="end" fill="clear">
        <ion-checkbox mode="ios"></ion-checkbox>
    </ion-button>
</ion-item>
© www.soinside.com 2019 - 2024. All rights reserved.