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)

Most upvoted 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 the click event firing!