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

Question

As I saw here , a filter can be used to simulate a cross browser version

pointer-events: none; 

However, this simply does not work in IE9, and does not work in the "emulate IE8" version in IE9. However, the native installation of IE8 does an excellent job of this. Is there any solution that makes it work for IE9?

Answer 1

You are right - the AlphaImageLoader filter has been removed from IE9. This has been done so that it does not conflict with methods that are compatible with standards. In this case, pointer-events: none , which now works in IE9 .

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

Edit: I already came across this again, and it seems that pointer-events: none does not work in IE9 (and not for HTML elements). I thought this worked, but when re-testing, none of the methods work to transition to IE9. Maybe I had IE9 in compatibility mode.

It is not perfect at all, but you can force IE9 into IE8 using the <meta> :

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

Apologies for the misinformation, I will continue to study this.

September 24, 2012 update:

The remarkably useful caniuse.com contains additional information about pointer-events for HTML. Support in IE10 is not yet known, and it seems that Opera does not support this property. I would now recommend using pointer-events unless you specifically target Webkit / Mozilla.

Answer 2

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

However, event pointers work on svg elements in Internet Explorer.

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

If you use pointer events to just add some kind of texture on top, you can replace the div with the svg element

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