bringToFront() in IE on multipolygons loses event handler

[kingfisher13]

Browser - IE 9-11 have problems, Chrome (latest stable - 46) and Firefox (latest stable - 42) are fine.
Leaflet version - 0.7.7

JSFiddle - https://jsfiddle.net/fd967s4n/2/

Description: Added a simplified US States geojson to a standard Leaflet map. Attached mouse handlers using onEachFeature. All the mouse handler does is adjust the style, however if bringToFront() is used, the mouseout event doesn't fire on multipolygons in IE.

See Michigan, Alaska, Hawaii, and Virginia in the above fiddle.

Tested this on 1.0.0-beta.2 and it's worse. IE doesn't register a mouseout for any polygon. Chrome and Firefox again do just fine. Again, removing the bringToFront() function call fixes the display bug in IE11, though obviously removes the needed functionality of bringing the poly to the front.

[rendrom]

I have the same problem:
https://jsfiddle.net/rendrom/xtcsLpnd/

[perliedman]

Wow, we obviously dropped the ball on the original bug report here. Sorry.

I can reproduce this and it turns out the problem is that bringing the element to front fires another mouseover in IE. This causes an a loop of bringToFront calls in this case. and (I'm guessing) this also causes no mouseout to be fired, since it thinks the mouse isn't over the feature.

A workaround is implementing the mouseover listener like this:

var bringingToFront = false;
geojson.on("mouseover", function (e) {
    console.log("mouseover");
    if (!bringingToFront) {
    	bringingToFront = true;
    	e.target.bringToFront();
    } else {
    	bringingToFront = false;
    }
});

Hopefully we can come up with a more elegant fix that we can put into Leaflet.

[perliedman]

Found a better way to fix this, submitted as #5465.