disable touch on the pseudo content of an element

问题:

Actually I have one toggle button component and I used the ::before pseudo class to insert text into it. Now when I'm clicking on toggle's button text , toggle button state changes. how to avoid this?

Ionic 2 code:

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

classes :

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

.item-inner {
    display: block;
}

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

Requirement: I can only create my required view by using above scheme.

Expected: I want someMethod() to be called when toggle button is clicked, not pseudo text.

Thanks for any help!!

回答1:

It's not possible to attach event listener to one element, but exclude that element's pseudo content. The reason is: pseudo content is not part of DOM, thus cannot be excluded from element selection.

However, you can listen the element (together with its pseudo content) and make exclusion inside the event listener function (someMethod in this case), by checking the clicked/touched position. Check this fiddle for example.

p.s. In your case, I guess the :before pseudo content is used to label toggle button? If yes, <label> tag is more appropriate.