6

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?

Community
  • 1
  • 1
Lg102
  • 4,733
  • 3
  • 38
  • 61

2 Answers2

9

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.

Liam Newmarch
  • 3,935
  • 3
  • 32
  • 46
  • 3
    Did this work? I can't seem to get it working in IE9. The docs say something about SVG but it's not exactly clear if it will work for other elements. I have .wrapper{ pointer-events:none;} .wrapper *{pointer-events:all;} and all the styles trace out in developer toolbar. – ablemike Aug 28 '11 at 01:12
1

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"/>');
}
Revolution42
  • 191
  • 1
  • 5