How can I get the list of DOM elements that are located at a given position in the page

Question

Possible Duplicate:
Locating DOM element by absolute coordinates

I want to find out the list of all the DOM Elements that are located at the position where my mouse is clicked. I require to do this using javascript or jquery. Could someone suggest me on how I could do this?

Have a look at http://stackoverflow.com/questions/4786066/locating-dom-element-by-absolute-coordinates. — Felix Kling, Oct 22 '12 at 05:42
This is not an exact duplicate question. The link to this other answer, in my opinion, is not a full answer to the question posed above. You cannot set the front-most element on a page to "display: none" and expect the positions of all the remaining elements on the page to remain the same. Indeed, removing a div can cause the layout of the page to change entirely. So how is that method going to allow a user to capture all the layers that may exist at a certain pair of coordinates on the page? — Ringo, Oct 23 '12 at 07:53

score 1 · Answer 1 · answered Oct 22 '12 at 04:59

1

I'd use jQuery to do this, starting at the clicked element and getting a list of all the clicked elements. Add a handler to the document on the mouse click:

$( document ).click( function( event ) {
    // event.currentTarget is the clicked element
    // this is a list of all the parents of the clicked element
    $( event.currentTarget ).parents();
}

answered Oct 22 '12 at 04:59

pwp2

451
3
12

While I agree this can work, it may not retrieve all non-static positioned elements. – Ian Oct 22 '12 at 05:04
i agree with ianpgall. There are elements at the location that are arranged at the same location based on z-index and non-static positioned as well. How can i retrieve them? – Abishek Oct 22 '12 at 05:14
Fair enough. I'm at a loss for how to get them all... – pwp2 Oct 22 '12 at 05:18

Luca Fagioli · Answer 2 · 2012-10-22T07:12:07.907

This does the job (fiddle):

$(document).click(function(e) {
    var hitElements = getHitElements(e);
});

var getHitElements = function(e) {
    var x = e.pageX;
    var y = e.pageY;
    var hitElements = [];

    $(':visible').each(function() {
        var offset = $(this).offset();
        if (offset.left < x && (offset.left + $(this).outerWidth() > x) && (offset.top < y && (offset.top + $(this).outerHeight() > y))) {
            hitElements.push($(this));
        }
    });

    return hitElements;
}

When using :visible, you should be aware of this:

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation. During animations to show an element, the element is considered to be visible at the start at the animation.

So, based on your need, you would want to exclude the visibility:hidden and opacity:0 elements.

Thanks Luca, let me try this and get back. Close to what I am looking for. — Abishek, Oct 22 '12 at 06:47
You are welcome. Try it out with the fiddle: http://jsfiddle.net/U2RCE/12/ — Luca Fagioli, Oct 22 '12 at 07:02

score 0 · Answer 3 · answered Oct 22 '12 at 05:24

0

Check this - http://jsfiddle.net/blackpla9ue/U2RCE/5/
Click on the word 'world' to see it in action.

This works in absolute positioned elements as well.

$('*').click(function(event){
    console.log($(this)[0].tagName + ' ' + $(this)[0].className);
});

answered Oct 22 '12 at 05:24

Malitta N

3,384
22
30

I see that elem3 is on top of elem2. When I click elem3, I get the following as output ~~~ DIV elem3 BODY HTML ~~~ I doesnt recognize the elem2 lying under elem3 Shouldn't the output be ~~~ DIV elem3 DIV elem2 BODY HTML ~~~ – Abishek Oct 22 '12 at 05:34

Ringo · Answer 4 · 2012-10-22T06:28:02.357

You cannot simulate a mouse click by coordinate position using javascript (think about what a security problem that would be!), so I don't think you can accomplish what you're looking to do. Plus, there's no programmatic way to look at what layers may exist at an arbitrary x/y position on a page. If you're just trying to debug something and want to see everything at a certain x,y position on the page, just delete each element in Firebug or Chrome inspector when you're done looking at it and use the inspector to see what's underneath it.

If you really need a tool that does what you want, you could use a combination of jquery and a browser add-on. You could write a Chrome or Firefox extension that simulates a real mouse click with event.x and event.y coordinates. You could then use the aforementioned suggestion of capturing all the parents of the clicked element. Once you've catalogued those elements, find the top-most parent of the clicked item, clone it, delete all the clone's elements except the top-most parent itself, and set this top-most parent's background to transparent. Now replace the original element in the DOM with this transparent cloned element. In this way, you preserve the layout of the page, and when you simulate another click, you're actually clicking "through" the top-most element (which is transparent) and clicking the next DOM element (if any) behind it. Repeat the process above until you reach the body tag. In the end, you will have a complete list of all DOM elements at a specific x,y location.

How can I get the list of DOM elements that are located at a given position in the page

4 Answers4