[GIS] Leaflet map draggable marker events

javascriptleaflet

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.

Best Answer

I can confirm that, as you've reported, this appears to be a real bug in both 0.7x and 1.0x (on Chrome, at least; I haven't tested it elsewhere). However, there is a workaround that seems to prevent it. If you name your click event listener function, you can turn it off on dragstart, then use setTimeout to turn it back on a short time after dragend:

map.on('click',
  function mapClickListen(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('dragstart', function(e) {
      console.log('marker dragstart event');
      map.off('click', mapClickListen);
    });
    marker.on('dragend', function(e) {
      console.log('marker dragend event');
      setTimeout(function() {
        map.on('click', mapClickListen);
      }, 10);
    });
    marker.addTo(map);
  }
);

Here's a fiddle to test it:

http://fiddle.jshell.net/nathansnider/sxokLjzb/

Related Question