Pointer events: none, filter, works in ie8 and anywhere, not ie9

Question

As I have seen here, a filter can be used to simulate a cross browser version of

pointer-events: none;

However, this just doesn't work in IE9, nor does it in the "emulate IE8" version in IE9. A native installation of IE8 handles it fine, however. Is there any solution that makes it work for IE9?

Answer 1

You're right - AlphaImageLoader filter has been removed from IE9. This was done so that it doesn't conflict with the standards compliant methods. In this case, pointer-events: none, which now works in IE9.

If you're using a conditional comments to target IE for the filter fix, change them to target only IE8 and below. Try changing <!--[if IE]> to <!--[if lte IE 8]>

Edit: I've since come across this again and it appears that pointer-events: none does not work in IE9 (not for HTML elements anyway). I thought this was working, but on re-testing neither method works for click-through on IE9. Perhaps I had my IE9 in a compatibility mode.

It's not ideal at all, but you could force IE9 into IE8 mode via the <meta> tag switch:

 <!--[if ie 9]><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"><![endif]-->

Apologies for the misinformation, I'll keep looking into this.

Update Sept 24 2012:

The wonderfully useful caniuse.com has more information on pointer-events for HTML. Support in IE10 is still unknown and it appears that Opera does not support this property either. I would advise against using pointer-events for now unless you're specifically targeting Webkit/Mozilla.

Answer 2

pointer-events only works in webkit, mozilla browsers in html.

However pointer-events works on svg elements in internet explorer.

There is a good modernizr plugin https://github.com/ausi/Feature-detection-technique-for-pointer-events/blob/master/modernizr-pointerevents.min.js to test the existence of pointer-events

If you are using the pointer events to just add some sort of texture over the top you can replace a div with a svg element

if( !Modernizr.pointerevents )
{
    $('#texture').replaceWith('<svg id="texture"/>');
}