[Javascript] Finding element at coordinates

Fri May 14 22:40:36 CDT 2004

At 08:09 PM 5/14/2004, King Chung Huang wrote:
>Is there a way to find out what element is at a location on a page? For 
>example, find what's at the location (100px, 200px) from the top-left 
>corner of the body?

There could be many objects at any given screen location.  One approach 
would be to walk through the DOM examining the position & dimensions (and 
visibility?) of each object, and assembling an array of objects that 
overlap the desired position.

There are two common situations in which the mouse will point to more than 
one object -- containers and overlap:

<body>
         <div>
                 <p>
                         <span>
                         </span>
                 </p>
         </div>
</body>

In nested objects, when the mouse points at the lowest grandchild object, 
it points at all of the parent objects as well (unless any of them are 
absolutely positioned elsewhere on the screen).  If you had to choose just 
one object, you could choose the lowest child object, although in practice 
this might not always get you the most "significant" object at that position.

<div id="div1" style="position: absolute; top: 100; left: 100; ..."></div>
<div id="div2" style="position: absolute; top: 105; left: 105; ..."></div>

When objects overlap, the mouse can be said to point at all the objects 
that occupy that point on the screen.  If you had to choose just one, you 
could choose the object with the highest z-index or the object most 
recently rendered, if you can determine that.

Paul

At 08:09 PM 5/14/2004, you wrote:
>Hi,
>
>Is there a way to find out what element is at a location on a page? For 
>example, find what's at the location (100px, 200px) from the top-left 
>corner of the body?
>
>King Chung Huang
>Learning Commons
>University of Calgary