I have a Leaflet control that I add to the map using the code below.
...
var FilterControl = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function(map) {
this._div = L.DomUtil.create('div', 'leaflet-formcontrol');
L.DomEvent.disableClickPropagation(this._div);
return this._div;
},
});
...
var filterControl = new FilterControl();
filterControl.addTo(map);
On the map itself, I bound an event listener:
map.on('click', remove_highlights)
Now, my problem is that when a 'click' event is started (mousedown) in the control layer, but ends on the map (on mouseup) after dragging the mouse, the click event of the map is triggered, which I do not want. The situation occurs quite easily because there is a slider on the controllayer.
Mozilla describes the behaviour, but it does not become clear to me how to solve it. For instance, stopPropagation() or stopImmediatePropagation() does not work, not on the map or on the layercontrol, when adding a click event listener to it. Also, setting L.DomEvent.disableClickPropagation(..) but then on the map element, does not work.
Does anyone have any experience with this problem?
Best, Robert