Determining Element Below event.target in js

Question

I'm attempting to determine the tile that the mouse is currently hovering over in an OpenLayers map. The code that currently is written - that uses a standard Hover handler and simply sends back the event - works in Chrome but fails in Firefox, because an SVG element comes in between the tile and the mouse. I'm sure that something similar could happen in IE with VML.

So, the question is, how does one determine the element that a mouse is over if that element is 'blocked' by another element that is currently the target of that request? Or, is it possible to 're-run' an event using trigger() in another div, and retrieve the new target to simulate the same? Otherwise, it's difficult and inefficient to determine the image that lies at a certain pixel coordinate using OpenLayers.

Answer 1

AFAIK, there is no efficient way to determine which elements are under the mouse; you must get the x/y position from the event (event.pageX/Y) and compare that with the position/size of each element on the page.

Answer 2

I'm not sure but maybe the document.elementFromPoint method can help you, see: elementFromPoint method

Answer 3

https://developer.mozilla.org/en/css/pointer-events maybe?