I have a map and I add a featureGroup to it. Then, I add some polygons to the featureGroup. Now I want something to happen, when a polygon in featureGroup is clicked and something else to happen when a place on the map outside of the featureGroup to be clicked. This is what I have done:

var map = L.map('map').setView([52.51616, 13.31339], 11);
var featureGroup = L.featureGroup().addTo(map);

map.on('click',function(e) {
        console.log('clicked on map');
featureGroup.on('click',function(e) {
        console.log('clicked on polygon');

But when I click on a polygon of featureGroup, the consolereads

clicked on polygon clicked on map

When I click on the map (outside of a polygon):

clicked on map

I want only the featureGroup's listener to be fired, when clicked on a member of that group, not the map's listener.

I use Leaflet 1.6.0


You have to prevent propagation of click event once you catch it in featureGroup layer. Leaflet has handy method L.DomEvent.stopPropagation just for that (see https://leafletjs.com/reference-1.6.0.html#domevent).

In your case code would look something like that:

featureGroup.on('click',function(e) {
  console.log('clicked on polygon');
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.