Retrieving html control by specifying coordinates

Question

How can I get the id of a html control just by specifying the coordinates of a triggered event (like onmousedown, onmouseup, onclick, etc..). the coordinates can be got by:

e.clientX , e.clientY where e is the event object.

The idea is to get the id of control on which a click event is done without having any onClick event in that control's definition.

This will dispense the need of specifying the onClick event for multiple controls.

Answer 1

I do not believe that this is possible, but fortunately (if I understand your requirements correctly) you do not need to:

If you want to get the HTML element where a user clicked, without specifying a click event handler on each element, simply specify a click handler on a top level element (one that contains all the other interesting elements - maybe even "document"), and then look at the MouseEvent's target property - it will specify the HTML element that received the click initially and not the element where you specified the onclick event handler (this can be gotten to simply by using the "this" keyword).

If you have firebug, try this out in your firebug console right here on StackOverflow:

document.getElementById('question').onclick = function(e) { 
  var target = window.event?window.event.srcElement:e.target; 
  alert("Got click: " + target); 
}

Then click anywhere on your question text to get an alert with the correct HTML element :-) .