禁用元素的伪内容

Question

实际上我有一个切换按钮组件，我使用:: pseudo class插入文本。现在，当我单击切换的按钮文本时，切换按钮状态会更改。如何避免这种情况？

离子2代码：

<ion-item>
    <ion-label>some content</ion-label>
    <ion-toggle (ionChange)="someMethod($event)"></ion-toggle>  
</ion-item>

类：

 .toggle-icon {
    display: inline-block !important;
}
.item-inner {
    display: block;
}
ion-toggle::before {
    content: "Set as Default";
    padding-left: 11%;
}

要求：我只能使用上述方案创建所需的视图。

预期：我希望在单击切换按钮而不是伪文本时调用somemethod（）。

感谢您的任何帮助！

Answer 1

不可能将事件侦听器附加到一个元素上，而是将该元素的伪内容不可行。原因是：伪内容不是DOM的一部分，因此不能从元素选择中排除。

但是，您可以通过检查单击/触摸的位置来聆听元素（与其伪内容一起），并在事件侦听器功能（在这种情况下为someMethod）中排除。例如，检查这个小提琴。

P.S。就您而言，我想:before伪内容用于标记切换按钮？如果是，<label>标签更合适。