How to make Internet Explorer emulate pointer-even

Question

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?

Answer 1

Here is another solution that is very easy to implement with 5 lines of code:

1. Capture the 'mousedown' event for the top element (the element you want to turn off pointer events).
2. In the 'mousedown' hide the top element.
3. Use 'document.elementFromPoint()' to get the underlying element.
4. Unhide the top element.
5. Execute the desired event for the underlying element.

Example:

        //This is an IE fix because pointer-events does not work in IE
        $(document).on('mousedown', '.TopElement', function (e) {

            $(this).hide();
            var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
            $(this).show();
            $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

            return false;

        });