Leaflet map draggable marker event bug

[shiro900]

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

[balciseri]

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!

[shiro900]

I reproduced it. Try to click, drag and release a marker as fast as you can.

[IvanSanchez]

I have a feeling this might be a duplicate of #4458, but let's leave both them open for now (and hope a fix for both happens)

[IvanSanchez]

I can reproduce with Chromium 50, but not with Firefox 45.

[shiro900]

If someone sees this and wants a temporary solution/workaround, take a look at the answer here:
http://gis.stackexchange.com/questions/190049/leaflet-map-draggable-marker-events

[balciseri]

I'm wondering why i can't reproduce the Click event beeing fired after i end the drag of the marker, i also use Chrome 50.0.2661.75

[shiro900]

You have to do the dragging and release so fast, that when your mouse is released the cursor is not on top of the marker, but its on top of the map instead. Basically drag and release fast a couple of times, and you will see it.

[balciseri]

Ok i can reproduce it if i'm really fast, but reading your opening issue you said that this happens everytime to you after a release of the mouse when you end a marker drag. That's why i was confused.

[shiro900]

Oh I see what you are saying. I actually HAVE to use marker.on('click', L.DomEvent.stopPropagation);, otherwise I get a map click event even if I click on the marker ! This is how I noticed the bug in the first place. I am using Leaflet 1.0.0-rc1 and chrome 49.0.2623.112. My chrome is a couple of months outdated.

[balciseri]

A ok. As @IvanSanchez and @yohanboniface told me at https://github.com/Leaflet/Leaflet/issues/4458
This is not a bug but it's a feature.
And you found the correct solution to this!

[balciseri]

What version are you using?
With the last version i can't reproduce it.
See:
https://playground-leaflet.rhcloud.com/seda/edit

Not sure if it's because i just upgraded crome from 50.0.2661.75 to 50.0.2661.87 but now the playground snippet is acting funny.

After the page loads if i click on the map nothing happens. I need first to drag the map then it starts to work ( aka is registering the click event and inserting the marker when i click on the map). And i also started to get that bug that shiro900 was talking about.
Basically sometimes when i start dragging the marker it moves above my "hand cursor" so when i end the drag the cursor is on the map and not on the marker and a click event is fired.

Also after i finish the dragging of the marker again nothing happens when i click on the map to insert another marker, but on the second click it starts to work again. I'm not sure what's going on.

On firefox this is not happening.

Edit it also could be a playground issue: it seems to happen when the playground console is shown.
Edit2: this is so inconsistent.. i can't reproduce it anymore, now it's just working.

[Shemeikka]

Hi,

I have a similar problem and it might be related to #4458 but since it's closed and this is open, I thought I would comment here.

When circle or cirleMarker has a popup binded, this popup will launch after dragging the marker. If I read right, then this should have been fixed, right? Maybe it has something to do with the way I'm doing the drag for circle and circleMarker.

I made a new playground that demonstrates this behavior:
https://playground-leaflet.rhcloud.com/put/1/edit?html,js,output

Playground should be using Leaflet 1.0.0-rc.1+e2caf40 and I'm using Chrome 50.0.2661.102 m

[yohanboniface]

Maybe use Leaflet.Path.Drag plugin for handling circle dragging?
Related #4628 and #4638.

[yohanboniface]

@balciseri should we close here?

[Shemeikka]

Yeah,

I tried that plugin but it didn't work at all and then I found you could move circles like the way I'm doing in the playground and it worked. But then there's this popup-thingy.

[yohanboniface]

See #4628 and #4638 for inspiration if you wanna go by foot ;)

[Shemeikka]

The point is that the dragging works but the popup is fired after drag ends. I'm not sure if its because the way I'm doing the drag or is this a leaflet bug.

[yohanboniface]

I'm not sure if its because the way I'm doing the drag or is this a leaflet bug.

Neither. Your browser will issue a click event when you finish your drag and mouse up. And this click will trigger the popup if you binded one to it. Leaflet is smart enough to prevent this click when Leaflet itself is managing the drag, but if you do it by yourself it's out of its jurisdiction.
You can try to duck simulate, but this will need anyway a sort of handler, as in #4628.
One workaround if you don't want to go the North Face may be just to have you own way of binding the popup that takes care of that (i.e. when dragging set any flag anywhere, and on click check this flag before opening the popup).

[Shemeikka]

Okay,

Thanks for your quick replies. Javascript is not my strong point and I'm a little bit lost here. I need to do some reading about events and stuff or I could just try to get that drag-plugin to work.

[mtafel]

Here is my experience. Leaflet 1.0.3.

I've a marker that is fixed at a certain length _n_ from a point, used for rotating another icon (_n_ essentially being a radius).

Its quite easy to reproduce the unwanted map click event: mousedown on marker --> drag --> cursor/pointer/finger leaves the marker (due to _n_) and is now over the map --> mouseup (dragend) --> map fires click

Is the behavior I describe the intended behavior?

No worries if it is, I've implemented the workaround that @shiro900 describes in his gis.stackoverflow post to get around the click.

[nrenner]

My use-case is drawing no-go circles with Leaflet.Editable while creating or editing a route with Leaflet.Routing. When dragging a circle edit handle (vertex marker), often a click event is fired on the map after drag, creating an unwanted route marker.

This happens when the vertex marker (a DivIcon) is dragged near the edge, which is more likely for such smaller DivIcons than the default marker icon.

Here is a demo with buttons for running reproducible automated tests for both near-edge and fast dragging scenarios (in Chrome, not Firefox):

http://plnkr.co/edit/awq40pnvEESdlIbfcHX5?p=preview

near edge (offset)

Dragging a marker near the edge often leaves the cursor outside the marker after drag, thus the up and click events are fired on the map instead of the marker. You can also see the cursor wandering off the marker when dragging multiple times without moving the mouse in between.

The issue seems to be that offset is subtracted from _startPos before adding it later, thereby neutralizing the first move:
https://github.com/Leaflet/Leaflet/blob/eb9572800df7a6703423e31defebde04e638c6d7/src/dom/Draggable.js#L151

Simply removing the offset subtract seems to fix this issue (see demo patch (a)), but I don't understand what the purpose of the offset subtract is or why it has been added in the first place. So probably I'm missing something?

fast dragging

Some findings regarding the fast dragging issue:

• the above offset issue also adds to this one
• the position of the last move is not updated because the requestAnimFrame
  https://github.com/Leaflet/Leaflet/blob/eb9572800df7a6703423e31defebde04e638c6d7/src/dom/Draggable.js#L169
  is cancelled in onUp/finishDrag (99dd46b538093a83c6402a829daa17b8cd362dad):
  https://github.com/Leaflet/Leaflet/blob/eb9572800df7a6703423e31defebde04e638c6d7/src/dom/Draggable.js#L213-L214
• ignoring the click after dragging doesn't work, because target is the map, so _draggableMoved is checking the _moved flag of the map instead of the marker
  https://github.com/Leaflet/Leaflet/blob/5ce473bab65be772e0cc6e25020c95ffba2fe5b2/src/map/Map.js#L1292-L1293

The root causes seem to be:

• last move, up and click events created together at the same time (according to Event.timeStamp) when dragging fast - see "timeStamp:" in console log when dragging fast manually in the demo - and up is dispatched before the next animation frame
• click target seems to be always the same as up target

Don't really know how to fix this:

• not using requestAnimFrame and instead calling _updatePosition synchronously would fix this issue (see demo first patch (b)), but that's probably not what we want?
• making sure the final position is set in any case (see demo second patch (b)) would fix the marker position but not avoid the click event on the map, as it is too late in the up handler, the click target is already set to the same as up