"pointer-events: none" does not work in IE9 and IE10

Question

The CSS - property pointer-events: none; works fine in Firefox, but it does not in Internet Explorer 9-10.

Is there a way to achieve the same behaviour of this property in IE? Any ideas?

Answer 1

From the MDN docs:

Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.

Read more here, basically, pointer-events on a non-SVG (Scalable Vector Graphic) is non-standard.
If you check the browser support table on the linked page (about two-thirds down) you'll note that IE support on non-svg's is ziltsh, jack squat, naut,... not supported, that is.

After some digging, I did come across this article that does allow for you to mimic the behaviours through use of layers, and , thanks to this post, I found this JS-bin That might help...

However, in IE (and Opera, and AFAIK all browsers), you could simply force a type of cursor on an element:

a, a:hover, a:visited, a:active, a:focus /*, * <-- add all tags?*/
{
    cursor: default;/*plain arrow*/
    text-decoration: none;/*No underline or something*/
    color: #07C;/*Default link colour*/
}

The result should be pretty similar to that of pointer-events: none;

Update:

If you want to prevent the click events in IE that, as shasi pointed out, is prevented in other browsers, simply add an event listener that delegates the click event.
I'll assume, at the moment, that you're targeting all a elements:

var handler = function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'a')
    {
        if (!e.preventDefault)
        {//IE quirks
            e.returnValue = false;
            e.cancelBubble = true;
        }
        e.preventDefault();
        e.stopPropagation();
    }
};
if (window.addEventListener)
    window.addEventListener('click', handler, false);
else
    window.attachEvent('onclick', handler);

That should prevent all click events on anchor elements.

Answer 2

For crappy IE10, there is another solution, example :

/* must be over the element that have the action */

.action-container:after {
    content: ' ';
    position: absolute;
    width: 100%; 
    height: 100%;
    top: 0;
    left: 0;
    z-index: 250; 
    background-color: grey; /* must have a color on ie10, if not :after does not exist... */
    opacity: 0;
}

Answer 3

From looking at the APIs, I don't think Rich Harris' Points.js, nor Hands.js, provide support for pointer-events: none.

Thus, I just implemented a tiny script to polyfill this feature:

• Pointer Events Polyfill.