离子标签点击不起作用答案

【问题标题】：Ionic label click not working离子标签点击不起作用
【发布时间】：2018-07-30 13:12:43
【问题描述】：

有时我不明白为什么 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

【问题讨论】：

您能分享一下您的用例以及您想要实现的目标吗？ Ionic 非常灵活，有时只是细微差别。所以看起来你正在经历一些“边缘情况”，这就是你可能会有这种感觉的地方。
点击标签时，我需要在 labelClick() 方法中检查是否点击了链接（通过 event.target）。如果它已被点击，我应该将链接的解释显示为工具提示。但是，如果单击标签的任何其他部分，则不应显示工具提示。
那么为什么要使用离子输入？抱歉，您的上下文仍然很模糊，您所描述的内容可以通过不同的方式实现，但我看到您正在使用 ion-input - 这是否意味着您允许用户输入带有可能链接的任意文本？
所以标签是针对问题的，问题可以有一些可解释的词，这就是我需要显示工具提示的原因。但是输入是为了回答必须以纯文本形式编写的问题。基本上，在我的实际项目中，更改这个 ion-label 和 ion-input 将意味着 html 和 CSS 代码的巨大变化，这将需要数天时间。在这个要求出现之前一切都很好，令人失望的是，这个不那么先进的功能似乎不可能。
我明白了，让我试试吧

标签： angular ionic-framework ionic3

【解决方案1】：

查了很久才发现是这个样式有问题（可以通过查看ion-label看出）：

因此解决方法是：

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

与：

 .item-cover{
  display:none;
}

【讨论】：

【解决方案2】：

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

<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 和 ion-input 来实现，如下所示：

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

【讨论】：

对不起，没关系，我接受我自己的答案是正确的，因为它是第一个。

【解决方案3】：

因此，在您的情况下，问题是 ion-input 正在“接管”其输入侦听器，并且您的链接相关（点击）侦听器不再“听到”。

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

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

【讨论】：

但我认为输入监听器不会接管。这意味着我可以将侦听器附加到输入，并且当我单击标签时将触发侦听器功能。 stackblitz.com/edit/ionic-g9uzpx?file=pages/home/home.html
我不明白 Ionic 是如何使标签无法附加事件的，这怎么可能
卡片无法正常工作，因为它们会显着改变布局
好吧，让我再试一试：)
所以您需要将其保留为列表吗？

【解决方案4】：

我在尝试在 ion-menu 的 ion-list 中使用带有 click 处理程序的 ion-items 时遇到了类似的问题。
我的模板如下所示：

<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;
}

【讨论】：

【解决方案5】：

Ionic 4.11.0 也遇到了这个问题。

http://www.damirscorner.com/blog/posts/20190920-HyperlinksInIonicCheckboxLabels.html 的这一点帮助了我。它仍然会收到 ion-label 的完整点击事件，但 <a> 标签会获得更高的 z-index，因此首先点击：

/* Ionic 4 */
.ion-activatable {
  ion-label {
    a {
      position: relative;
      z-index: 10;
    }
  }
}

【讨论】：

【解决方案6】：

解决办法是：

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

【讨论】：