marker - multiple mouseover events

[nmccready]

From @porjo on February 24, 2015 2:1

I have created a custom 'div' marker where the popover displays on mouseover and hides on mouseout - see Plunkr http://plnkr.co/edit/ftGP05yqENLHT05nvZpN?p=preview

I find that mouseover and mouseout fire multiple times when the mouse is moved between elements within the same marker causing the popover to flicker off and on. Is this a bug? If not, how would I avoid the event being fired multiple times?

Copied from original issue: tombatossals/angular-leaflet-directive#642

[nmccready]

From @molehillrocker on August 7, 2015 8:8

Did you find a solution for this? We have the same issue with the current version 0.8.6. We are using icons on the marker provided by https://github.com/lvoogdt/Leaflet.awesome-markers. I guess it has something to do with the icon being added as child element of the 'common' icon, which causes separate mouseover and mouseout events.

[nmccready]

A workaround for the time being would be to debounce your handlers for your events.

[nmccready]

Adjusted plunker for correctness on event handler.

http://plnkr.co/edit/ZfsCImBfODaerpwqTfuo?p=preview

Yes it looks like the events are firing too many times; but I am not sure if this is us or leaflet itself yet.

[nmccready]

Also the behavior appears to be no different from 0.8.5 and 0.8.6 so that statement is invalid.

[nmccready]

From @molehillrocker on August 7, 2015 13:59

I just mentioned v0.8.6 because it is the initial version we used in our project. Since it is a new project, we did not use any previous version of the angular-leaflet-directive. The wording might have been a bit misleading.

[nmccready]

@molehillrocker no worries just trying to be clear for other. I updated the plnker with debounces. I don't see anything wrong in angular leaflet except for bogus logs on [markers] destroy.

[nmccready]

My guess this is a leaflet issue. If someone wants to fork the plnkr and make a raw leaflet example doing the same thing without angular and proves me wrong then we can dig further.

[nmccready]

From @molehillrocker on August 7, 2015 14:35

Okay, we'll try the debouncing. Thanks for your effort! :)

[nmccready]

From @molehillrocker on August 8, 2015 9:44

I just visited Leaflets GitHub page and found this: Leaflet/Leaflet#3708.
It seems that a vertical offset applied to the popup fixes the issue. We will try that on monday, because this JSFiddle looks pretty promising.

[nmccready]

From @molehillrocker on August 13, 2015 14:6

It seems that just applying an offset does the trick only if the popup opens on top of the marker and the mouse then points on the popup instead of the marker. In our case, the marker contains a separate HTML tag, which causes the issue (as shown in your Plunkr).

The reported issue Leaflet/Leaflet#3708 makes me think that this is desired behavior.

[benoitv-code]

FYI: Regarding the multiple mouseover events, it was fixed in leaflet v1.0.0-beta.2 (but not in v0.7.7).

See Leaflet#3708

[nmccready]

@kunnix thank you