Ionic 7中ion-checkbox标签内链接无法触发点击问题

问题详情 #

在Ionic 7x版本中，当在ion-checkbox组件内部嵌套<a>链接时，点击链接部分只会触发onIonChange事件，无法触发链接的href跳转行为。

代码示例 #

<ion-checkbox
    value={value}
    name='name'
    onIonChange={(e) => this.handleChangeCheck(e)}
    label-placement="end">
    <div class="ion-text-wrap">My text <a href="https://google.it"> click here</a></div>
</ion-checkbox>

解决方案 #

相关说明已添加至Ionic官方文档（对应PR已提交），解决该问题的核心是阻止链接点击事件向父级ion-checkbox冒泡，只需在<a>标签上添加事件阻止冒泡的逻辑：

<ion-checkbox
    value={value}
    name='name'
    onIonChange={(e) => this.handleChangeCheck(e)}
    label-placement="end">
    <div class="ion-text-wrap">My text <a href="https://google.it" onClick={(e) => e.stopPropagation()}> click here</a></div>
</ion-checkbox>

添加onClick={(e) => e.stopPropagation()}后，点击链接时会优先触发跳转行为，不会再触发ion-checkbox的onIonChange事件。

内容的提问来源于stack exchange，提问作者JEricaM