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
}
L.DomEvent.stopPropagation(e)
.