html - 禁止触摸元素的伪内容

Question

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

ionic 2 代码:

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

类(class):

 .toggle-icon {
    display: inline-block !important;
}

.item-inner {
    display: block;
}

ion-toggle::before {
    content: "Set as Default";
    padding-left: 11%;
}

要求:我只能使用上述方案创建我需要的 View 。

预期: 我希望在单击切换按钮时调用 someMethod()，而不是伪文本。

感谢您的帮助!

Answer 1

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

但是，您可以通过检查点击/触摸位置来监听元素(连同其伪内容)并在事件监听器函数(在本例中为 someMethod)内进行排除。检查这个fiddle例如。

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