禁用触摸元素的伪内容

Question

实际上我有一个切换按钮组件，我使用:: before伪类将文本插入其中。现在，当我点击切换按钮文本时，切换按钮状态会发生变化。怎么避免这个？

Ionic 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）中排除。例如，请检查此fiddle。

P.S。在你的情况下，我猜:before伪内容用于标记切换按钮？如果是，<label>标记更合适。