禁用对元素伪内容的触摸

Question

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

离子 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 为例。

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