Entry

How do I get the element at a certain (x, y) position?

Oct 30th, 2002 20:38
Mark Filipak, Dan Kazzu, http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113 and http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113

Probably the easiest way to do this is to simulate mouse events until 
you find the element that responds.
 var ID; // ID MUST BE GLOBAL
 var A = new Array(
   ...THIS IS AN ARRAY OF YOUR ELEMENT 'id' STRINGS...
   ...YOU MUST HAVE 1 'id' FOR EACH ELEMENT...
   ...EACH 'id' MUST BE UNIQUE...
 );
 // INSTALL A MOUSE HANDLER FUNCTION
 function F(E) {
   // NOTE THAT 'E' IS LOCAL TO THIS FUNCTION. IT WILL NOT INTERFERE
   // WITH THE MOUSE CLICK EVENT OBJECT (ALSO, NAMED 'E').
   ID = E.target.getAttribute('id');
   E.stopPropagation();
   E.preventDefault();
 }
 // CREATE & INTIALIZE A REUSABLE MOUSE CLICK EVENT OBJECT.
 // YOU ACTUALLY COULD UTILIZE ANY MOUSE EVENT.
 var E = document.createEvent('MouseEvents');
 E.initMouseEvent(
   'click', // TYPE OF EVENT
   ,false // CAN BUBBLE
   ,true // CANCELABLE
   ,document.defaultView // VIEW
   ,Event.CLICK // DETAIL
   ,X +'px' // SCREEN-X <--- YOUR 'X' GOES HERE
   ,Y +'px' // SCREEN-Y <--- YOUR 'Y' GOES HERE
   ,0 // CLIENT-X
   ,0 // CLIENT-Y
   ,false // CTRL-KEY
   ,false // ALT-KEY
   ,false // SHIFT-KEY
   ,false // META-KEY
   ,0 // BUTTON (0=LEFT, 1=MIDDLE, 2=RIGHT)
   ,null // RELATED TARGET (=NONE)
 );
 // LOOP THROUGH THE ELEMENTS, PROVOKING A 'click' EVENT FOR
 // EACH UNTIL YOU GET 'ID'.
 for (var i=0; ((i<A.length)&&(typeof(ID)=='undefined')); i++) {
   // SELECT THE 'NEXT' ELEMENT
   O = document.getElementById(A[i]);
   // ADD A 'click' EVENT LISTENER TO ACTUALLY DO THE WORK
   O.addEventListener('click', F, false);
   // DISPATCH THE EVENT OBJECT
   O.dispatchEvent(E);
   // REMOVE THE 'click' LISTENER
   O.removeEventListener('click', F, false);
 }
 // AND HERE IS YOUR ANSWER
 if (ID) alert("The element at X,Y = "+ X +","+ Y +" is: "+ ID);
 else alert("There is no element at X,Y = "+ X +","+ Y);
Of course, if you want the element as an object instead of its ID as a 
string, you can do this
 O = document.getElementById(ID);
Ciao -- Mark