CSS pointer-events='none' and/or XUL mousethrough='always' in web pages for Firefox

Question

Very recently I asked this question on how to pass clicks through an element (e.g. full screen overlaying ). Received some good advice, but I still wondered which browsers supported this natively...

For those skipping the previous link, the overlay is purely cosmetic, must be overlayed and should ignore clicks (all mouse events should pass right through it)...

So far, I've only managed to get this working with WebKit browsers.

Works (Chrome and Safari 4): -
<image src='./images/75/75.overlay.blood.png' width='100%' height='100%' style='z-index: 3; position: absolute; top: 0; left: 0; pointer-events: none;' />

Firefox is known to support pointer-events with SVGs (and with other HTML elements in 3.6); problem is, I can't seem to get this to work with an SVG (e.g. xlink:href="overlay.24bit.8alpha.png").

Another way I hoped this could be achieved was by using XUL in HTML.

I'm hoping to use the attribute mousethrough="always" on the overlay (<image>, etc). Not working as of yet...

Oddly enough, Internet Explorer treats alpha opacity PNGs transparent areas as "click through" which is handy.

Any other good (or simple yet hackky) ways to achieve this in Firefox (3+). Pondered a Flash overlay with wmode="transparent" (fail).

Answer 1

Try this jQuery solution: http://jsbin.com/uhuto

Works in Firefox, Chrome, iPad's Safari, and IE8 at least. The only issue I saw was that the overlay wasn't translucent in IE, but I assume that's something that can be overcome.

Another solution (used by an Ext JS plugin): http://www.vinylfox.com/forwarding-mouse-events-through-layers/ - uses Javascript to reforward the events.