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

Hope this helps :)

http://www.vinylfox.com/forwarding-mouse-events-through-layers/

You can also try a javascript solution :

http://jsbin.com/uhuto

Answer 2

CSS:

#red_silk { 
  width:100%;
  background: url('../img/red_silk.png') no-repeat center top;
  height:393px;
  z-index: 2; 
  position: absolute; 
  pointer-events: none; 
}

OLD HTML:

<div id="red_silk"></div>

NEW HTML:

<svg id="red_silk"></svg>

Answer 3

Adding the following CSS will disable ms pointers.

#container{
    -ms-touch-action: none;
}

Answer 4

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.

Answer 5

$.fn.passThrough = function (target) {
    var $target = $(target);
    return this.each(function () {
        var style = this.style;
        if ('pointerEvents' in style) {
            style.pointerEvents = style.userSelect = style.touchCallout = 'none';
        } else {
            $(this).on('click tap mousedown mouseup mouseenter mouseleave', function (e) {
                $target.each(function() {
                    var rect = this.getBoundingClientRect();
                    if (e.pageX > rect.left && e.pageX < rect.right &&
                        e.pageY > rect.top && e.pageY < rect.bottom)
                        $(this).trigger(e.type);
                });
            });
        }
    });
};

http://jsfiddle.net/yckart/BQw4U/

$('.overlay').passThrough('.box');
$('.box').click(function(){
    $(this).toggleClass('active');
});

Answer 6

Just spent two days researching this for an IE10 project (IE10 doesn't support the pointer-events: none CSS property, MS voted for withdrawal of the spec because of possible clickjacking issues). Workaround is to have INLINED SVG tag and set pointer-events in SVG. I kept trying to use e.g. an IMG tag with SVG src, or a DIV with background-image set to a SVG file (where I'd use pointer-events="none"), even SVG data-uris, but it didn't occur to me that having it in a separate element precisely required the unimplemented pointer-events CSS property.

So you need a bare-bones SVG like this: First some CSS e.g.:

    .squareBottomRight {
        width: 50px;
        height: 50px;
        position: absolute;
        bottom: 0;
        right: 0;
    }

And then in HTML:

    <svg class="squareBottomRight" xmlns="http://www.w3.org/2000/svg"
        pointer-events="none">
        <rect id="test2_rect" x="0" y="0" width="50" height="50" fill="blue"/>
    </svg>

Reference: https://bug-45467-attachments.webkit.org/attachment.cgi?id=67050