IE9: CSS attribute pointer-events not supported

[flexarts]

Hey! First of all great work thanks a lot for this script.

Problem

The problem is that IE9 is not supporting the pointer-events CSS attribute for all HTML elements (just for the element) since this is the W3C recommendation to prevent clickjacking.

Solution

In order to be able to highlight/blockout elements with IE9 a few lines need to be added to the mousemove event. The hack is to hide all elements for a moment that should not receive the mouse event (i.e. having pointer-events: none set) and use the cross-browser function document.elementFromPoint to get the element the user points at.

Code

// delegate mouse move event for body
this.mouseMoveEvent = function( e ) {
        var target;
        if (jQuery.browser.msie) {
            $(".feedback-nopointer").hide();
            target = document.elementFromPoint(e.clientX, e.clientY); 
            $(".feedback-nopointer").show();
        } else {
            target = e.target;
        }
...

All subsequent appearances of e.target should be replaced with target. Furthermore all elements with the CSS attribute pointer-events: none set have to be marked with class="feedback-nopointer" at DOM injection. In my case:

glass.className = "feedback-glass feedback-nopointer";

feedbackHighlightElement = "feedback-highlight-element feedback-nopointer",

this.h2cCanvas.className = 'feedback-canvas feedback-nopointer';

highlightContainer.id = "feedback-highlight-container";
highlightContainer.className = "feedback-nopointer";
...

Patch for close box

In order to make the close link for already highlighted elements work with the new feedbackHighlightElement classes, you need to edit the following lines from

highlightBox.className = highlightBox.className.replace(/feedback\-highlight\-element/g,"");

to

highlightBox.className = highlightBox.className.replace(new RegExp(feedbackHighlightElement, "g"),"");

[niklasvh]

I'm aware of the lack of pointer-events support in IE9, but originally I had planned to leave the element highlight out from IE 9 anyway, but I never got around to doing the general area highlighting (i.e. click anywhere and drag to highlight whatever area you want).

Having said that, I'll try your suggestion when I get some time to work on this project.

[ghost]

Hi,
First, thanks for the code. I had the similar issues with IE >9 when I load the page with feedback bug tool the page loads the feedback-glass but I cannot highlight anything except when I try to blackout the whole page blacks out. If you have the modified code it would be great if you could upload the commit.