Mouseover event doesn't granulate on IE9 for sub elements, event doesn't start on IE8

Question

We were adapting a method posted here highlight a DOM element on mouse over, like inspect does to NOT use jQuery.

We came up with this solution so fa

Answer 1

I had a quick look at your fiddle, and forked a version that works on IE8, to be found here. As it turns out, indexOf, especially in combination with the bitwise ~ is something IE doesn't seem to be all that fond of, so the quickest fix seems to be a simple for(i=0;i.

As pointed out before, e.target won't work in IE, as JScript calls this property srcElement. This makes sense, since IE events always bubble up to the document, so all events have a source, rather then a target.

The biggest difference is to be found in your CSS: again IE is a pain: MS believes that rgba is no good for some reason. It seems they prefer writing CSS's that no human on earth can make sense of:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0.3,startColorstr='#4c333333', endColorstr='#4c666666');

gives you a semi-transparent grey overlay. To be honest, I found this piece of my answer here.

When it comes to the pointer events, the only way round this, AFAIK, is another event listener, that handles the onclick event:

function noClick(e)
{
    e = e || window.event;
    if (e.preventDefault)
    {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    e.returnValue = false;
    e.cancelBubble = true;
    return false;
}

Hope this helps you on your way...