Correct way to stop Leaflet Map propagation

Question

What is the correct use of the Leaflet stopPropagation?

I have a canvas map drawn with some custom png markers. That works great, but when they are clicked, both the marker and map click events are fired. I just want the marker click event to fire.

https://francoisromain.github.io/leaflet-markers-canvas/dist/leaflet-markers-canvas.js to do the custom canvas png markers.

     var marker = L.marker([entry.Lat, entry.Lon], {icon: icon, UniqueId: entry.UniqueId}).on('click', onClick).bindTooltip(entry.Callsign);
 aircraftmarkers.addMarker(marker);

The below function is when a marker is clicked.

function onClick(e) { /*show the div*/ }

And this is the function for when the map (not marker) is clicked.

map.on('click', function(e) { /*hide the div*/}

So as you can tell when I click the marker, it would show and hide the div at the same time. I have tried putting in

L.DomEvent.stopPropagation(e).

to either and both of the functions but this does not seem to make any difference whatsoever.

From the console I can tell that the marker event is fired, then the map event, presumably due to the order of layers.

What is the correct use of the stopPropagation()? Am I missing something? On Leaflet 1.7.1

Here is the full onClick(e)

 function onClick(e) {
 L.DomEvent.stopPropagation(e);

    //////////////////set the currentselectedmarker variable.
    currentselectedmarker = this.options.UniqueId;
    
    //////////////////set marker id in url
    window.history.replaceState('', this.options.Callsign+' - Live Map', '?id='+currentselectedmarker);
    ///////////////ensure only 1 request can happen per second
    if (((Date.now() / 1000) - lastwindowupdate) > 1) {
    lastwindowupdate = Date.now() / 1000;
    map.panTo(this.getLatLng());
    document.getElementById("searchresults").innerHTML = '';
    
    if (screen.width > 600) {
    /////////////screen width is large enough for normal window, show it
    document.getElementById("window").style.width = "335px";
    document.getElementById("window").innerHTML = '<br><br><center><img height="250px" width="300px" src="<?php echo site_url(); ?>/leaflet/loading.gif"></center>';
    $('#window').load('<?php echo site_url(); ?>/leaflet/livemapaircraft.php?id='+this.options.UniqueId, function() {
    });
    }
    else {
    /////////////screen width is too small, show the mobile window instead
    document.getElementById("window-mobile").style.height = "170px";
    document.getElementById("window-mobile").innerHTML = '<center><img height="150px" width="200px" src="<?php echo site_url(); ?>/leaflet/loading.gif"></center>';
    $('#window-mobile').load('<?php echo site_url(); ?>/leaflet/livemapaircraft-mobile.php?id='+this.options.UniqueId, function() {
    });
        
    }
  
    }
    
    
    ////////reqeust too early
    }

Answer 1

It seems you are out of luck here with regular standard solutions, since leaflet-markers-canvas plugin somehow messes with regular Leaflet event processing. Neither L.DomEvent.stopPropagation(e) or L.DomEvent.preventDefault(e) prevent click event reaching the map.

One possible solution would be to have marker click indicator markerClick and set it to true when marker is clicked. It can be used then to skip map click processing.

Code could then look something like this:

var markerClicked = false;

function onClick(e) {
  markerClicked = true;
.
.
.
}

map.on('click', function(e) {
  if (markerClicked) {
    markerClicked = false;
    return;
  }
.
.
.  
}