Combining Raphael and jQuery to achieve browser compatibility

Question

Having discovered that IE does not handle javascript onmouseout, I\'m determined to use jQuery instead so the cross-browser compatibility would be taken care of

Answer 1

In my case, the actual problem was with calling the .toFront every freakin millisecond, because .hover(fooFunction, outFunction) calls fooFunction with every mouse cursor shift. Actually, the name quite suggests that it's a hover call, not a mouseenter :)

So, the trick is to make sure your fooFunction, or the contents of it, is only executed once (onmouseenter). Even in IE this works perfectly for me, without accessing any DOM nodes or trying to access other stuff which I don't want to touch:

var MouseEventHelper = {
    hover: function (el, funcIn, funcOut) {
        var entered = false;

        el.hover(
            function (e) {
                if (entered) {
                    return;
                }

                funcIn(e);
                entered = true;
            },
            function (e) {
                funcOut(e);
                entered = false;
            }
        );
    }
}

Then replace your hover calls like this:

var el = paper.rect(...);
MouseEventHelper.hover(
    el, 
    function (e) { 
        // do whatever you want!
        el.toFront();
    }
    function (e) { }
);