I have a leaflet map and there is both an event attached to the map (click) and an event attached to the circlemarker (click). Now I want to change the color of the circlemarker, but the trouble is that the event of the map fires as well and this is interfering with the logic of the circlemarker click.

How do I prevent the map event from firing when clicking on the circlemarker?

var circleMarker = L.circleMarker([point.lat, point.lng], {
  radius: 8,
  fillColor: "#ff0097",
  color: "#000",
  weight: 1,
  opacity: 1,
  fillOpacity: 0.8
}).addTo(drawmap);

circleMarker.on("click", function(e) {
  e.originalEvent.preventDefault(); //This does not work
  circleMarker.setStyle({ fillColor: '#1b1b1b' });
});


drawmap.on('click', function(e) {
//something unrelated
}

I have a leaflet map and there is both an event attached to the map (click) and an event attached to the circlemarker (click). Now I want to change the color of the circlemarker, but the trouble is that the event of the map fires as well and this is interfering with the logic of the circlemarker click.

How do I prevent the map event from firing when clicking on the circlemarker?

var circleMarker = L.circleMarker([point.lat, point.lng], {
  radius: 8,
  fillColor: "#ff0097",
  color: "#000",
  weight: 1,
  opacity: 1,
  fillOpacity: 0.8
}).addTo(drawmap);

circleMarker.on("click", function(e) {
  e.originalEvent.preventDefault(); //This does not work
  circleMarker.setStyle({ fillColor: '#1b1b1b' });
});


drawmap.on('click', function(e) {
//something unrelated
}

• javascript
• jquery
• leaflet

Share Improve this question Follow asked May 11, 2017 at 13:03 FullhdpixelFullhdpixel 82311 gold badge1313 silver badges2828 bronze badges 2

• Did you try to stop the event propagation inside the on click handler for the marker eg. e.stopPropagation(); ? – DavidDomain Commented May 11, 2017 at 13:13
• @DavidDomain just tried, does not work sadly – Fullhdpixel Commented May 11, 2017 at 13:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Late entry:

In the Leaflet docs there is an option when creating a marker, bubblingMouseEvents, that allows for the prevention of event propagation. This works when creating a circleMarker too.

So in your case:

var circleMarker = L.circleMarker([point.lat, point.lng], {
  radius: 8,
  fillColor: "#ff0097",
  color: "#000",
  weight: 1,
  opacity: 1,
  fillOpacity: 0.8,
  bubblingMouseEvents: false
}).addTo(drawmap);

Not seeing a way to handle this internally within Leaflet's event object. Perhaps you can track with an external flag:

var isCircleEvent = false;
circleMarker.on("click", function (e) {
    circleMarker.setStyle({ fillColor: '#1b1b1b' });
    isCircleEvent = true;
});


drawmap.on('click', function (e) {
    if (isCircleEvent) {
        //reset the flag and return;
        isCircleEvent = false;
        return;
    }
    //something unrelated
});