3

How can one know if an element is in front of another element, if the overlaying element is transparent? The purpose for this is if you're artificially clicking a page element by its ID, and you're ensuring there's no overlay on top of the element that would make confirm the click as synthetic (as a normal user would have to click on the overlay).

Case 1: The overlay is a child of the clickable element To Detect it: Ensure there's no children of the clickable element that look unusual.

Case 2: The overlay has an absolute position and a higher z-index to overlay the clickable element To Detect it: No clue! Unless you iterate through the bounding rectangles and z-index of every element in the DOM or go through the entire DOM looking for particular style attributes. That is expensive.

So, given the number of ways an element can be made to overlay another element, how can a user script detect elements overlaying elements? I suspect a very verbose method of going through the entire DOM could be avoided.

Edge
  • 2,456
  • 6
  • 32
  • 57
  • It sounds a bit like you answered your own question. It may be "expensive" to search the whole DOM, but it's doable. – Austin Mullins Feb 27 '15 at 23:05
  • I'm looking for alternative strategies I may not have thought of. There may be a quicker search, or even a jQuery function to detect this kind of thing. Hence the question. – Edge Feb 27 '15 at 23:06
  • I can't imagine the jQuery function doing anything differently. One idea I have is to just have the user script send a mouse move event that places the pointer over the desired object and send a click event to the document. That way, if the overlay is dynamic, it will still work. – Austin Mullins Feb 27 '15 at 23:31
  • As far as I know userscripts can't do that. Unless it's a third party application entirely. – Edge Feb 27 '15 at 23:32
  • 1
    I don't know why you got so many downvotes on this question. This question is more or less the subject of a problem I've long hoped is solvable. Though your answer didn't totally unearth the Eureka for me, It's an important coordinate for my further search. – Ifedi Okonkwo May 17 '16 at 16:38

1 Answers1

3

It turns out there's two ways to do this, and by this I mean two ways to find out if any given element is the top most element regardless of opacity.

Adapted from this blog post post and using their code (with some modifications) it's possible to see the top most element at any given mouse position. I modified their code to look for the computed style zIndex of any elements at a position. The downside to this approach is it's computationally costly in that you're looking at the positions of every element in the DOM more or less.

This stack question about checking whether an element is really visible on screen received an answer that linked to a browser method document.elementFromPoint which when given some screen coordinates returns the top most element, regardless of opacity but in accordance with its display style. It appears as though that function is supported in at least Firefox and Chrome.

In the end, there's two solutions to choose from, with the latter likely being the best solution in terms of reliability and cost.

Community
  • 1
  • 1
Edge
  • 2,456
  • 6
  • 32
  • 57