Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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?

Problem courtesy of: Vova Potapov

Solution

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 /*, * 

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.

Solution courtesy of: Elias Van Ootegem

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×