Leaflet map draggable marker event bug
See original GitHub issueEverytime 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
Issue Analytics
- State:
- Created 7 years ago
- Reactions:5
- Comments:25 (8 by maintainers)
Top Results From Across the Web
Leaflet map draggable marker events
Now if I drag the marker VERY quickly and release it, the bug still occurs, because the marker "follows" the mouse cursor in...
Read more >Leaflet marker draggable not working when function is ...
I am trying to create a function to be called by <a href="??">Button</a> that drops a marker at the center of the mapView...
Read more >Draggable Marker
Draggable Marker. Live Editor. const center = { lat: 51.505, ... const [draggable, setDraggable] = useState(false) ... const marker = markerRef.current.
Read more >Draggable markers in leaflet - shiny
Hello I am writing an application where the user delimitates a perimeter by clicking on a leaflet map. I would like to allow...
Read more >Leaflet - a JavaScript library for interactive maps
Events : click, mouseover, etc. Marker dragging. Visual Features. Zoom and pan animation; Tile and popup fade animation; Very nice default design for ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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!