0

I need to know when user interacts with an element itself or its pseudo-elements.
I have tried something, but to no avail. Is it even possible?

Experiment sandbox here: https://codesandbox.io/s/fervent-panini-5db01?file=/src/index.js

document.querySelectorAll('div.s').forEach(el => el.addEventListener('click', function(ev) {
  const {offsetX, offsetY} = ev
  const isOff = offsetX < 0 && offsetY < 0
  console.log(isOff, ev.target, {ev})
}))

This unfortunately doesn't work if the pseudo-element is inside its element.

Qwerty
  • 29,062
  • 22
  • 108
  • 136
  • https://www.geeksforgeeks.org/how-to-write-hover-condition-for-abefore-and-aafter-in-css/ does this link seem to help you? – ssomename May 18 '20 at 18:19
  • @DivyanshSingh Unfortunately not. I need to know the information in javascript. – Qwerty May 18 '20 at 18:21
  • Nope, not possible. That's why they are called pseudo elements. – Láďa Durchánek May 18 '20 at 18:27
  • Pseudo-elements are called pseudo not as you suggest but because they don't have a node in DOM. User can certainly interact with them, so I thought there could (and possibly should) be a meta information available, hence why I am asking. – Qwerty May 18 '20 at 18:32
  • Does this answer your question? [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) – disinfor May 18 '20 at 18:45
  • @disinfor Thank you, but no. I don't need to manipulate the content. I just need to know whether user clicked on an element or inside the pseudo-element. – Qwerty May 18 '20 at 19:08
  • But isn't that what you are trying to do? If a user clicks on a pseudo element, that is essentially setting it up to be manipulated - I use that term loosely - as in manipulated or data gathered from it. If you could detect user interaction of a pseudo element, wouldn't it also be fair to say you could target it for manipulation? – disinfor May 18 '20 at 19:14
  • 1
    This was quite an oversimplification from me, however you clarified it yourself. They are not in DOM, they are not represented in JavaScript. I got curious about this and tried some workarounds using `:hover` on a pseudo-element only to find out that also does not work, even though these are both CSS functionalities. – Láďa Durchánek May 18 '20 at 19:21
  • @LáďaDurchánek what's interesting as well, is that if you add the `:hover` to the main element - if you hover over the pseudo element, the `:hover` state will be triggered: https://jsfiddle.net/wasmpzyv/ - still doesn't help Qwerty with their functionality ask. – disinfor May 18 '20 at 19:47
  • 1
    @disinfor Exactly, my idea was to change a CSS variable when hovering on a pseudo element but no luck. – Láďa Durchánek May 18 '20 at 20:02
  • I also tried that with a css workaround, but that didn't work either https://stackoverflow.com/q/61875941/985454 Even though pseudo-elements are able to apply different styles, it is not possible to query them in JS, which would be a way to detect their interaction. – Qwerty May 19 '20 at 16:37

0 Answers0