Stop click propagation on a custom div within a leaflet map

Question

I have a custom div (with settings) within a map. I would like click event not to propagate to map when a user clicks on the div. How could one achieve such behavior?

Leaflet version 1.0.

score 3 · Accepted Answer · answered Jan 27 '17 at 09:49

3

See the documentation for L.DomEvent.stopPropagation().

answered Jan 27 '17 at 09:49

IvanSanchez

18,272
3
30
45

1

And `L.DomEvent.disableClickPropagation(myDiv)` if you want to disable all click-related events for a div. – Toast Sep 03 '19 at 02:12

score 2 · Answer 2 · answered Dec 28 '17 at 12:26

For anyone else coming here from a search engine, if you are trying to prevent clicks from a circle or other interactive layer from being handled by the underlying object (other circle or the map itself) you could also create the layer passing the option bubblingMouseEvents: false

Documentation: http://leafletjs.com/reference-1.2.0.html#interactive-layer

Stop click propagation on a custom div within a leaflet map

2 Answers2