1

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
    }
2
  • 1
    You write that you have tried, but didn't include code of how you have tried. Please include also that code. But it definitely should be L.DomEvent.stopPropagation(e). – TomazicM Feb 15 at 10:47
  • Thank for your reply I have added the entire onClick(e) function – user3245678 Feb 15 at 10:54
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;
  }
.
.
.  
}
2
  • Thanks very much for the comment. I thought this may be the case. What I have done is got my code to record the timestamp the marker and map click events are fired, and only allowing the map event to fire if it is over 1 second since the marker click. This does not stop it from firing but at least I have control whether my code is executed. Thanks for the help :) – user3245678 Feb 15 at 15:21
  • Sequence of events is always: first marker click event in then map click event. This means there is no need for timestamps and for 1 second gap when map click event is not allowed. – TomazicM Feb 15 at 16:10

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.