当我单击离子项目的标签时,会触发复选框。 我想找到一种方法来防止这种情况发生,因为我想在单击标签时触发另一个功能。
我找到了 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>
我希望有两种行为: - 单击复选框时仅触发该复选框。 - 单击标签或图标时,打开一个模式来编辑我的文档。
我刚刚遇到了类似的问题,并通过使用 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;
}
我找到了另一个解决方案。我在该项目中添加了另一个隐藏复选框。
<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>
您还可以将复选框包装在带槽的 div 中,这似乎会破坏项目和复选框之间的链接。
<ion-item (click)="itemHandler()">
<ion-icon />
<ion-label>Label</ion-label>
<ion-checkbox (click)="checkboxHandler()" />
</ion-item>
如果您将点击处理程序放在离子项目上,那么它将处理来自离子项目上任何位置的点击。但是,这包括来自复选框的点击,因此您必须确保还在复选框点击处理程序中调用
event.stopPropagation()
。
使用 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>