LeafletJS: prevent clicking on map when clicking on circlemarker

javascript, jquery, leaflet

Solution

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
});

Problem

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 } ```

Original source