51

Is there a method in jQuery to select an element located at a particular position?

For example, can I select the element that is located at left:100 and top:300 in absolute position?

It would be nice if I could select an element located in a range of positions, for example, select the element that is located left: 100 - 150 px top 200 - 280px.

the Tin Man
  • 158,662
  • 42
  • 215
  • 303
Thomas John
  • 1,903
  • 4
  • 24
  • 29
  • why would you need that? it's possible if you pass the parent element that has position: relative, but still why? it would deffinetly be slow and I really don't think you don't have other solutions for this – Claudiu Oct 15 '10 at 13:47
  • This is basically the same as this question: http://stackoverflow.com/questions/1280660/given-an-x-y-coordinate-i-need-to-find-all-html-elements-underneath-it – Anderson Green Jun 05 '13 at 05:20
  • Anderson, that one doesn't specify jQuery. This one does: http://stackoverflow.com/questions/2664227/find-element-at-an-absolute-position?rq=1 – Cees Timmerman Oct 01 '13 at 12:52

2 Answers2

87

You are looking for the .elementFromPoint() JavaScript/DOM method.

var elem = document.elementFromPoint(100, 100) // x, y

That returns a DOM node, which of course then can be wrapped into a jQuery object:

$(elem).remove(); // for instance

I'm not that aware about the cross-browser compatibility and I would like some guys who know better to edit this post or write a comment about it.

Reference: .elementFromPoint()

Example Link: http://www.jsfiddle.net/YjC6y/22/

the Tin Man
  • 158,662
  • 42
  • 215
  • 303
jAndy
  • 231,737
  • 57
  • 305
  • 359
  • 4
    Wow! Never knew that. Excelent!! Learn something new every day. – John Hartsock Oct 15 '10 at 13:55
  • 1
    @Thomas: that is pretty possible. – jAndy Oct 15 '10 at 14:15
  • in IE with the code : var elem = document.elementFromPoint(100, 100) alert(elem); it alerts Object, but nothing with alert(elem.id); it alerts the id in both FF and chrome – Thomas John Oct 15 '10 at 14:20
  • 1
    Apparently there is incompatibility between whether to use absolute document co-ordinates (Safari & Opera) or relative window coordinates (IE & Firefox). Explanation & jQuery solution on zehnet.de [document.elementFromPoint – a jQuery solution](http://www.zehnet.de/2010/11/19/document-elementfrompoint-a-jquery-solution/) – Jake Rayson May 16 '13 at 09:13
  • If you use border-radius, beware that the part "removed" by the rounded corners is (correctly) ignored by this command. This is useful if you are checking mouse position, but could cause confusion if you are programmatically checking if there is an element at some coordinates and don't know it has rounded corners. – Shu Oct 23 '13 at 12:57
  • Your should also substract the scroll offset when the viewport is smaller than the document. – Nicolas Castro Dec 08 '20 at 21:03
13

Provided you know the exact coordinates relative to the document:

function getElsAt(top, left){
    return $("body")
               .find("*")
               .filter(function() {
                           return $(this).offset().top == top 
                                    && $(this).offset().left == left;
               });
}

The other answer stops at the first overlay.

GôTô
  • 7,974
  • 3
  • 32
  • 43
Cees Timmerman
  • 17,623
  • 11
  • 91
  • 124
  • 2
    adding `:visible` to the selector in `.find("*")` might be helpful in some applications – Mike Oct 09 '14 at 17:23