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 think I found the problem in your implementation. But before we get to that, you might want to cure yourself of the global-scope-leak you present in line 45. There is a semicolon, where you probably want a comma:

var target = e.target,
    offset = findPos(target),
    width = target.offsetWidth;//target.outerWidth(),
    height = target.offsetHeight;//target.outerHeight();

You might also be interested in knowing Array#indexOf is supported since IE9 so ~no.indexOf(e.target) would fail in IE8 and below.

Now to your problem. Current Browsers (including Firefox) know pointer-events:none. Even IE10's support is still unknown. Any browser not supporting pointer-events will never fire the mouseenter event on elements that are covered by your overlay.

With IE7+ supporting document.elementFromPoint() you could bind to mousemove, hide the layer, detect the element below the cursor, fire the mouseover if necessary. If you go down this road, please consider throttling your mousemove events (see limit.js).

Something like this.

Update:

I haven't done any performance comparison of document.elementFromPoint() vs pointer-events:none. Current browsers (Firefox, Chrome, …) can deal with both, Internet Explorer can only work with the document.elementFromPoint() approach. To keep things simple I did not implement the alternate pointer-events:none route for modern browsers.