Leaflet: Leaflet map draggable marker event bug
Everytime I click on the map I create a draggable marker with a drag
function. It works great, however everytime I release the mouse after I dragged some marker, the click
event of the map is triggered. How can I stop that ?
map.on('click',
function (e) {
var pos = e.latlng;
console.log('map click event');
var marker = L.marker(
pos,
{
draggable: true
}
);
marker.on('drag', function (e) {
console.log('marker drag event');
});
marker.on('click', L.DomEvent.stopPropagation);
marker.addTo(map);
}
);
Edit: marker.on('click', L.DomEvent.stopPropagation);
This partially fixes the bug. Now if I drag the marker VERY quickly and release it, the bug still occurs, because the marker “follows” the mouse cursor in a speed slower than the speed with which I move my cursor, and so when the mouse is released, the mouse is not on the marker anymore, so the map click
event is triggered.
Edit 2 For the record I am using Leaflet 1.0.0-rc1
and chrome 49.0.2623.112
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 5
- Comments: 25 (8 by maintainers)
I can reproduce with Chromium 50, but not with Firefox 45.
What version are you using? With the last version i can’t reproduce it. See: https://playground-leaflet.rhcloud.com/seda/edit
Edit: after your edit i can see the fast drag problem. I don’t know how to get around that, but even without
marker.on('click', L.DomEvent.stopPropagation);
i don’t have the first issue of theclick
event firing!