How can I check if a user can see and click on an item?

Question

You can simply find all the truly visible and interactive elements on the page using the document.elementFromPoint function. However, it returns null for elements outside the viewport.

So, how to find all interactive and visible elements on a full page? Visible items are not limited to styles. Just look at the <div> container, which is now hidden behind all the children. Thus, the parent <div> no longer visible.

So, you know how you can find all the really visible elements on the page? In the above example, obviously, "Parent <div> " is practically invisible. There are other unpredictable situations where these elements may not be visible, and styles ( display , visibility , etc.) may not indicate it.

My final intention: I want to check if the item is really visible and accessible to the client for the end user or not. As an example of use, I want to find all the possible zones that the user can click on.

Answer 1

I think you misunderstood the basics of events in domApi. in any case, bubbles and grips will appear on the client. you must have seen this code document.addEventListener('click',function(){},false) ,

which means using a bubble instead of capture to handle the event. therefore, in fact, the clickable dom element is related to whether the DOMJs uses a bubble or capture