How to make Internet Explorer emulate pointer-events:none?

cross-browser, css, html, internet-explorer, javascript

Solution

The Internet Explorer recognizes pointer events: none, but only for SVG elements because pointer-events are only specified for SVG elements in the W3C specification (http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty).

You can try it with something like this...

CSS:

#tryToClickMe{

        pointer-events: none;
        width: 400px;
        height: 400px;
        background-color: red;
    }

HTML:

<svg id="tryToClickMe"></svg>

This works in IE9 and IE10 (I tested it). If you are not yet using SVG elements, then there is the posibility to wrap your existing elements in a SVG. The jQuery library provides a wrap method for that (http://api.jquery.com/wrap/).

There is a very good German article that has broken down the characteristics of the pointer events property: http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - There you will find (with the help of Google Translate) more information.

Hope I could help

Benny

P.S. If you want to access overlying and underlying objects, then you can use the document.msElementsFromPoint method in IE (http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx). It will give you all layers on a given point in an array.

Problem

I'm working on a project where we are enhancing highcharts by displaying a gradient PNG over the charts. We are using CSS `pointer-events:none;` to allow users to interact with the chart despite there being a div layered over the top. IE doesn't recognize `pointer-events:none;`, so users on IE either can't have enhanced chart design, or can't interact with the charts. I'm looking for a way to get IE to allow mouse events (specificaly hover events), to pass through a div to the elements below it. You can see a model of what we're working with here: http://jsfiddle.net/PFKEM/2/ Is there a way to get IE to do something like `pointer events:none;`, where mouse events pass through an element to elements blow them?

Original source

Related problems