I’m basically trying to build the equivalent of the firebug inspector in the browser. I’m currently using the <body> as the container in this example:
container.onmouseover = function(ev) { inspect(ev.target); }
In the inspect method, I reposition and resize a semi-transparent fixed positioned element over the element returned from the event target. But this causes the mouseover event to subsequently inspect the overlay element itself.
I basically want the event handler to disregard the overlaid element completely (it only exists to provide visual feedback) and continue to fire onmouseover events for the elements detected beneath it. Does this make sense?
Advertisement
Answer
If you don’t have to support all browsers then you could use the css property pointer-events. When set to none all events will be ignored. Try toggling pointer-events in this fiddle and see what I mean.
pointer-events:none;
I hate to link out, but this is a good article if you need to support IE.
http://www.vinylfox.com/forwarding-mouse-events-through-layers/