leaflet.js stops certain events from propagating

I have a problem where my mouseenter, mouseleave, mouseover and mouseout events get swallowed and do not fire.

Basically there's a map on my page which I add markers (divIcons) and draw paths on. Separate from this map, I have a tooltips and context menus that attach to events on the various markers and paths in order to be activated. The map does not know anything about the tooltips or context menu so the events are attached by a configuration file that uses jquerys on method.

Assuming the divIcons have the class markerElement the code looks like this:

$(document).on('mouseenter', '.markerElement', function(){ console.log('ENTER'); });
$(document).on('mouseleave', '.markerElement', function(){ console.log('LEAVE'); });

I've tracked the problem down to the stopPropagation method on line 6484 of leaflet-src.js version 0.7.3. If I comment out e.stopPropagation() my events work, I'm a little confused to the purpose of this method in relation to leaflet.

Is there any other way I can get the mouseenter and mouseleave events to attach to dynamically created elements on the map without the map knowing about it and without changing the leaflet source?

The context menu and tooltip code works on other elements that are not on the map, so a general solution that can dynamically pick out elements based on some kind of selector would be ideal.

Thanks for any ideas