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

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?

Solution 1

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.

Solution 2

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

Solution 3

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;

        });

Solution 4

$.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');
});

Solution 5

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>

View more solutions

Comments

[Marco Jakob]

Did you get it to work in IE9? It does not work for me. I've tried jsfiddle.net/AGVTM in IE9 and pointer-events are not forwarded to the red rectangle where the blue rectangle overlaps. Fiddle is taken from stackoverflow.com/questions/13972730/…

[user151496]

a few warnings, if someone was off to actually implement this solution (after a few fixes), he should replace getBoundincClientRect with jquery's position(), as cilentRect calculates coordinates against actual viewport, not the element position on the page. another error is that ie DOES define pointerEvents, but they don't work for non-svgs; so 'pointerEvents' in style will return true even though they won't really work. also, this has somehow limited functionality. i have tried doing it on simple divs- ok, but more complex things such as google maps won't work

[Calvin]

This won't work for clicking and triggering an underlying select element

[Mark Odey]

I like this approach very elegant. I will be giving a shot for replacing pointerEvents:none in older browser