Mouseout event not firing in Rafael.js

Question

I have a number of shapes drawn using Raphael.js that I need to add a shadow to and enlarge slightly when the mouse rolls over. I have everything working perfectly in Firefox and Chrome, but in Internet Explorer, the mouseout event doesn't appear to fire.

This is the mouseover/mouseout code I have for each hexagon shape (hexagon is a reference to the rafael element, this/_Promise being a reference to a class that defines the events among other things):

    this.hexagon.mouseover(function(){
        _Promise.hexagon.toFront();
        _Promise.hexagon.attr( { "transform": "...s" + scaleAmountOnRollover } );
        _Promise.shadow = _Promise.hexagon.glow({ "width": 8, "opacity": 0.4 });
    });

    this.hexagon.mouseout(function(){
        _Promise.hexagon.attr( { "transform": "...s" + (1/scaleAmountOnRollover) } );
        _Promise.shadow.remove();
    });

In IE (up to and including version 9), the hexagon shapes just keep getting bigger and bigger because the mouseout event isn't firing. I've put some console.logs in there to check this is definitely the case.

Any suggestions would be appreciated!

Answer 1

the event bubbling mechanism differs on IE, thus generates unstable behavior for mouseover / mouseout events, but their innovation (yes, we're still talking IE!) comes to the rescue.

you can use IE's mouseenter and mouseleave instead of the standard mouseover and mouseout in order to achieve a consistent behavior. you will, of course, have to step down from Raphaël's API and implement these separately: bind another event listener and pass the IE specific event types, as you will have to call legacy code for versions 6-8, use attachEvent on these, or addEventListener for version 9 onward.

you can read more about these IE-specific events on the quirksmode article on the subject.

if you prefer to use jQuery for this, they have already thought of that by providing mouseleave as part of the API.