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

Solution 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.