禁用元素上的涟漪效应答案

【问题标题】：Disable ripple effect on element禁用元素上的涟漪效应
【发布时间】：2019-09-15 20:34:01
【问题描述】：

我想禁用ion-chip 元素上的涟漪效应，该元素在点击时触发：

<ion-chip>
   <ion-label>Hey</ion-label>
</ion-chip>

我怎样才能做到这一点？

【问题讨论】：

【解决方案1】：

<ion-chip style="pointer-events: none;" >

这将禁用组件中的样式单击事件。假设你想要一个点击事件，你可以在它周围放置一个 div。

【讨论】：

要允许点击子元素，您还可以在子元素上使用pointer-events: initial。我为此设置了帮助类：.no-click { pointer-events: none; } 和 .yes-click { pointer-events: initial; }
这将消除涟漪/点击效果并使元素不可点击，如果您使子元素可点击，您将获得涟漪效果。你可能想试试这个解决方案stackoverflow.com/a/63032872/5151355

【解决方案2】：

请尝试此代码以消除涟漪效应

ion-chip.button-effect {
     display:none !important;
    }

【讨论】：

【解决方案3】：

根据source code，波纹效果仅适用于 Android 平台。因此，作为一种解决方法，我们可以将模式更改为mode="ios" 以避免该效果。 ion-chip 在两个平台之间似乎没有其他风格差异。

另外，这不会弄乱现有的pointer-events。

<ion-chip mode="ios">
  <ion-label>Hey </ion-label>
</ion-chip>

致谢：灵感来自 @rtpharry 对类似 question 的回答。

【讨论】：