单击离子项目Ionic 4时，是否有一种不触发复选框的方法? [英] Is there a way of not trigger checkbox when clicking in a ion-item Ionic 4?

问题描述

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

When I click on the label of an ion-item the checkbox is triggered. I want to find a way of preventing this from happening as I want to trigger another function when clicking the label.

我找到了离子3的答案:

I found this answer for Ionic 3: https://forum.ionicframework.com/t/solved-can-i-disable-a-checkbox-from-activating-when-clicking-on-a-label/95120 However, it is not working for 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>

我想有两种行为: -单击复选框时，仅触发复选框. -单击标签或图标时，请打开模式来编辑我的文档.

I'd like to have two behaviors: - When clicking in the Checkbox trigger just the checkbox. - When clicking on the label or the icon open a modal to edit my document.

推荐答案

我只是遇到了类似的问题，并且通过使用ion-item的插槽在ionic 4中找到了一个不错的解决方案.

I just had a similar problem and found a nice solution for it in ionic 4 by using the slots of ion-item.

<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"来设置它；

Explanation

• The elements in the start slot of the ion-item are not triggered when clicking the checkbox.
• The start slot has no bottom border by default so it must be set by adding lines="full" to the ion-item;

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

Be aware, that the main slot still is rendered with a large width. That may lead to some hidden content. In this case this can be fixed with a css tweak like this.

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

这篇关于单击离子项目Ionic 4时，是否有一种不触发复选框的方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！