Ionic 4复选框问题<ion-checkbox>阻止<ion-item>标签中的其他单击事件

Question

我们正在尝试将android应用程序的复选框和按钮放在同一行中。我们正在使用Ionic 4和Cordova 9来构建Andriod应用程序。

因此我们使用了以下代码段：

<ion-content>
<ion-item-sliding *ngFor="let test of testList">
<ion-item>

 <!-- check box to select user-->

<ion-checkbox color="secondary" [(ngModel)]="test.testId" 
(click)="selectUser(test .testId )" ng-true-value="right" ng-false- value="wrong" >    </ion-checkbox>

<!-- button  to view user-->

<ion-label text-wrap>
<h3>Test</h3>
<p>Test</p>
<button ion-button color="danger" block  (click)="viewUser(test .testId )">View User</button>
</ion-label>
</ion-item>
</ion-item-sliding>
</ion-content>

当我们单击按钮时，就会触发复选框单击事件。 即使在这种情况下我们单击行中的任何位置，也会调用Checkbox click事件。

任何帮助将不胜感激。

谢谢。

Answer 1

我检查了ion-checkbox元素，结果是一个错误，或者恰恰是离子ionic bug report的实现错误。

简而言之，在ion-checkbox中，有一个按钮可以触发事件单击，但是该按钮具有css属性，可以接受离子项目的所有宽度和高度，并且此按钮在“ shadow DOM”内部，因此难以覆盖其属性。

但是如果您暂时需要修复程序。

我看到ion-checkbox中的此按钮具有z-index：2属性，因此给ion-label设置z-index：3，由此按钮的空间将不会触发，而将触发复选框的空间仍然可以工作。

添加页面的.scss

ion-label{
   z-index: 3;
}

此外，建议禁用单击离子项目空间时的效果，这将改善UX，因为单击空白而不触发动作时显示效果不好。

编辑

我的框架版本。

我希望我有所帮助：）