Css 'Pointer-Events' Property Alternative For Ie

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.

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

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.

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:

1. 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.

2. 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.

---

Related Topics