How to Make Internet Explorer Emulate Pointer-Events:None

css 'pointer-events' property alternative for IE

Pointer-events is a Mozilla hack and where it has been implemented in Webkit browsers, you can't expect to see it in IE browsers for another million years.

There is however a solution I found:

Forwarding Mouse Events Through Layers

This uses a plugin that uses some not well known/understood properties of Javascript to take the mouse event and send it to another element.

There is also another Javascript solution here.

Update for October 2013: apparently it's coming to IE in v11. Source. Thanks Tim.

How to simulate pointer-events: none on an pseudo element in IE10?

My solution for this exact problem(using fa icons in select fields) is to give the pseudo element zero width and style the overflow. It's a bit of a hack but it works a treat.

Alternatives to pointer-events:none in IE?

Ok, so after many hours of searching through wrong answers all over the place, I finally fixed it... and it wasn't too hard either...

IE doesn't support pointer-events the same way other browsers do. However, it does work in the following situations:

border elements. pointer-events:none works on the borders of an
element (i.e. border: 5px solid #000;). The element itself won't
let you click behind it, but the border will.
SVG images. Images or backgrounds formatted as .svg will support the pointer-events:none.

In my problem, I was overlaying an image over a menu item to give a cool effect, shown below.

In short, each li element has a border-bottom.
The span contains a background image (highlighted in green - top right is orange, bottom left is transparent, and a white line between the two) which is positioned to the right side of the ul. This gives the effect that the menu is skewed at 25deg, but it actually just continues under the image.

I had to use pointer-events:none because when hover over 'our programmes', the sub-menu dissapears when the mouse moves over the li portion that is covered by the image/span.

Changing the image to .svg and using pointer-events:none allowed this method to work on IE. Most other browsers don't require the .svg part, but since they all support the file type it was not an issue.

Sample Image

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

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.

SVG not recognising pointer-events:none

The root (top most) <svg> element will not support pointer-events: none. The reason behind this is that it's a possible security exploit, you could cover a Facebook Like button with an SVG and let clicks go through as in this example http://jsfiddle.net/rVxTn/

If the SVG element is not root then clicks should go through. This example should work on IE9 (untested)

http://jsfiddle.net/DLEsn/

However, this doesn't solve your problem, because you cant put HTML elements inside the SVG element.

I've encountered this problem multiple times before, I've had to work around it in different ways. I'd suggest you to open a new question with the actual problem (and possibly screenshots) to see how this can be worked around.