I am working on a project that uses Leaflet. I have a big map that I am rendering in a browser div, and I am rendering a popup div (using z-ordering) above it when a user clicks on an element.
The problem is that if you click on the ‘pop up window’ and drag, leaflet drags the underlying map as if the div wasn’t there. This makes for weird behavior if I put a select drop down in the div, and probably prohibits any drag and drop behavior in the child div.
How do I stop the div from sending events that occur within it’s boundaries to leaflet? I tried playing with the CSS property pointer-events, but that didn’t seem to do anything. Looking over the leaflet questions already posted didn’t seem to illuminate the problem either.
Advertisement
Answer
Attach event listeners to your custom pop-up, and run stopPropagation and optionally preventDefault on it.
Leaflet has a few utilities and shorthands for this, e.g.:
L.DomEvent.on(divElementForMyCustomPopup, 'click mousedown', function(ev){
L.DomEvent.stop(ev);
});