I have been on a mammoth quest to discover how to redirect events from a large transparent div (covering a whole web page) to elements below the div region. At this point I have not found a solution. However progress was made and such info could save a hell of a lot of time for some people who share such a quest!
First thing I achieved was to capture all mouse events on the transparent div and discover the underlying elements at which the mouse was over. This was achievable using
object.elementFromPoint(x,y). It seems to be supported by both Mozilla and IE. I’m not sure about others. I used Dojo for cross-browser event handling. Before
elementFromPoint can be used you must somehow hide the div then afterwards show it again, you could adjust the style or remove/append the actual node. NB: this does not introduce flickering. Here is example code:
divElement.style.visibility = "hidden";
var targetElement = document.elementFromPoint(evt.clientX, evt.clientY);
divElement.style.visibility = "visible";
Note that when capture mouse events, capture all DOM and browser-specific events (e.g. DND events).
At this point we want to re-fabricate the event as if it were to be sent to
targetElement. This is where I have racked my brains for the last day 😮 Originally I redirected the event by using