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?

Answer 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

PS 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 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 eg 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 eg:

    .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

Answer 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;

        });

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

Answer 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>

Answer 6

Adding the following CSS will disable ms pointers.

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