离子标签单击不起作用

Question

有时我不明白为什么Ionic如此僵硬。我有一个输入和一个彼此堆叠的标签：

<ion-item>
<ion-label stacked (click)="labelClick($event)" [innerHTML]="htmlString"></ion-label>
<ion-input  ></ion-input>

labelClick()函数无论如何都不会触发。

我可以做些什么以便单击LABEL来触发该功能吗？无需更改外观/使用的组件。

这里是一个带有代码的堆栈闪电，表明它不起作用： https://stackblitz.com/edit/ionic-5yreac?file=pages%2Fhome%2Fhome.html

Answer 1

经过长时间的调查，我发现这种样式是个问题（可以通过检查离子标签看到）：

因此解决方案是：

.item-input ion-label{
  pointer-events:all!important;
}

与：

 .item-cover{
  display:none;
}

Answer 2

因此，在您的情况下，问题是离子输入正在“接管”其输入侦听器，而与链接相关的（单击）侦听器不再“听”。

我会尝试使用这种方法：使用离子卡（或网格）或sedivre div明确划分用户输入区域和您的问题文本/字符串。

这是堆叠闪电战： https://stackblitz.com/edit/ionic-9gz5ok

Answer 3

这可以通过以下两种方式完成：
1]如果要在同一离子项目中同时使用离子标签和离子输入：
已经观察到，由于“指针事件” CSS，带有“ ion-label”和“ ion-input”的ion-item一起影响标签侦听器。默认情况下，“指针事件：无；”被添加。因此，如果您希望单击侦听器正常工作，则需要通过添加以下代码来覆盖此样式：

<ion-item>
   <ion-label class="clickEnableCls" stacked (click)="labelClick($event)" [innerHTML]="htmlString"></ion-label>
   <ion-input  ></ion-input>
</ion-item>

您需要在各自的.scss文件中添加以下类：

.clickEnableCls{
   pointer-events: visible !important;
}

2]通过在两个不同的离子项目中进行离子标记和离子输入，可能如下：

<ion-item>
   <ion-label stacked (click)="labelClick($event)" [innerHTML]="htmlString"></ion-label>
</ion-item>
<ion-item>
    <ion-input  ></ion-input>
</ion-item>

Answer 4

当在离子菜单的离子列表中尝试将离子项目与单击处理程序一起使用时，我遇到了类似的问题。
我的模板如下：

<ion-menu>
  <ion-list>
    <ion-item button (click)="myFunc()">A Clickable Menu Item</ion-item>
  </ion-list>
</ion-menu>

在我的情况下，令人讨厌的样式是：

.menu-content-open { pointer-events: none; }

我的解决方案，我认为一个相当简单而灵活的解决方案是添加以下全局样式：

ion-item[button] {
    pointer-events: initial !important;
}

Answer 5

在Ionic 4.11.0中也是如此。

http://www.damirscorner.com/blog/posts/20190920-HyperlinksInIonicCheckboxLabels.html的这一点对我有所帮助。它仍然会收到离子标签的完整点击事件，但是Locale标签的Z索引较高，因此首先单击：

<a>

Answer 6

解决方案是：

/* Ionic 5 */
.item-input ion-label {
   position: absolute;
}