Leaflet: mouseover and mouseout events do not behave like mouseenter and mouseleave on markers

[Eschon]

According to #1144 Leaflets mouseover and mouseout should behave like mouseenter and mouseleave. However this fiddle shows that this is not the case.

If you move the mouse over the outer ring of the marker the popup shows up but as soon as you enter the inner circle it is closed because mouseout is fired. If you move back to the outer ring the popup shows up again.

[mourner]

Thanks for ticketing, this is a pretty interesting use case. I guess it'll be the same if you use divIcon with a nested HTML too.

[mourner]

cc @yohanboniface

[Eschon]

this is a pretty interesting use case

I have to make a bunch of different icons that are all the same except for the background colour.
So if I do it this way I can load one svg file and change the background.

[IvanSanchez]

So if I do it this way I can load one svg file and change the background.

Maybe you can try to use :hover CSS selectors and do some trickery there. Using .pngs and changing the background position on :hover is a well-known technique.

[mourner]

@Eschon yeah, you can achieve the same look by using divIcon and border-radius for the circle look plus borders.

[Eschon]

@IvanSanchez CSS would work if what I described above was the only problem. But the icons are used on multiple maps and the colors can be completely different on two separate maps. This would still be possible but probably it would also upset the guy who has to prepare those icons for me.

@mourner divIcons could work but as you said above they have the same problem:
http://jsfiddle.net/Eschon/spkj72te/

[yohanboniface]

I think we have two issues here:

• firstly, effectively mouseout/mouseover are fired when the mouse is moving from a marker div element to a child of this element and vice-versa
• secondly, when the popup opens, it triggers a mouseout because the mouse is now on the popup and no more on the div itself

So even if we fix the first issue, the second will remain and of course it 0is not a bug that we can fix ;)

About the first issue, I'm not sure what we want to do. This behaviour is the natural DOM behaviour, but indeed I've read that in Leaflet 'mouseout' and 'mouseover' should act as 'mouseleave' and 'mouseenter'.

@mourner do you confirm this? I.e. why don't we let people use 'mouseleave' and 'mouseenter' when they need this behaviour?
Or is it for consistency because we don't want mouseout/over to be fired when moving in/out the tiles, and thus we decide to have a mapping 'mouseout' => 'mouseleave' and 'mouseover' => 'mouseenter' everywhere in Leaflet?

[fminuti]

I think the problem is the popUp: (I added the (vertical) offset)
http://jsfiddle.net/fevwbrjq/2/

[Eschon]

@fminuti Your right it seems that there isn't really an issue.
Now I have the problem that I need to be able to move the mouse over the popup because there are links inside it. But that isn't really something that leaflet is responsible for so I'll find some way to work around it in my code.

@yohanboniface feel free to close if you agree that there is no issue in Leaflet.

[molehillrocker]

We currently have the issue that @yohanboniface mentioned in his first case, where transition to/off a nested div inside the marker throws an additional mouseover/mouseout event. We are using Leaflet in conjunction with angular-leaflet-directive which embeds the map into our AngularJS SPA and Leaflet.awesome-markers which is responsible for applying FontAwesome icons onto Leaflet markers.

Example image from Leaflet.Awesome-markers:

[yohanboniface]

Fixed by https://github.com/Leaflet/Leaflet/commit/7c2ac9f39d427de40c2dba1bc6591fd0a902e9d5

[kunnix]

mouseout/mouseover are fired when the mouse is moving from a marker div element to a child of this element and vice-versa

To clarify for those experiencing this issue:

• v1.0.0-beta.2: fixed.
• v0.7.7: not fixed.

As of today, you can try: bower install leaflet#1.0.0-rc.1

[stuharvey]

For v0.7.7 users having a similar issue and arriving here via google or otherwise, I'll give my $0.02 on a good way to handle this rather than just offsetting the popup: fiddle.

On a related note, I also wanted to find a way to avoid triggering the mouseout event on a marker when adding a new feature on or around it. In my application, I'm displaying GPS data which has an error radius for each GPS fix. I wanted to be able to mouse over a marker for a given data point and show that error, but I ran into the same issue where adding a layer or showing a popup when mousing over a marker would trigger the marker's mouseout event.

Here's a fiddle showing the undesired behavior and how to fix it.