Stop propagation of 'click' event in Leaflet

Question

In one of our projects we're using Leaflet along with Leaflet.markercluster plugin. Looking through the Leaflet's sources I found that it appends _collapse() function to the map's click event, so whenever I click on the map it contracts previously expanded cluster.
Now, I want to disable this behavior. If the cluster is expanded, then I just want to deselect all of its markers on click event (and don't contract the cluster itself). Here is the piece of my code:

map.on('click', function(e) {
    scope.deselectAllMarkers();
});

I tried to add the following lines in the end of this one-line callback in order to stop propagation of click event:

scope.L.DomEvent.stopPropagation(e);
scope.L.DomEvent.preventDefault(e);
scope.L.DomEvent.stop(e);
scope.L.DomEvent.stopPropagation(e.originalEvent);
scope.L.DomEvent.preventDefault(e.originalEvent);
scope.L.DomEvent.stop(e.originalEvent);

And none of them works. Default listener which is hidden inside of the Leaflet sources keeps its invocation whenever I click on the map. Am I missing something?

Did you find a solution to this in the end? – Captain John Dec 27 '13 at 15:48 — Captain John, Dec 27 '13 at 15:48

score 30 · Answer 1 · answered Mar 17 '14 at 10:23

30

I know that this answer is quite late, but if someone is interested in a solution, here is how i have solved it.

This snippet here below is an example of binding a function to the click event.

map.on('click', doSomething);

Actually, after checking leaflet's API and some geekish debugging, it seems that the event returns an object, not the event itself. The event itself is wrapped into a field within the returned object.

var doSomething = function(map) {
    // stop propagation
    map.originalEvent.preventDefault();
};

When using the above snippet, the event bubbling has stopped, something which i wanted, and probably what you wanted.

answered Mar 17 '14 at 10:23

KarelG

5,176
4
33
49

2

There is no `originalEvent` on a click event (anymore?). – Matthieu Brucher Aug 04 '19 at 13:50
@MatthieuBrucher Are you sure? I just checked leaflet's documentation and [it is still present](https://leafletjs.com/reference-1.5.0.html#mouseevent-originalevent)? Best to check the object to see if it is a `MouseEvent` object (and thus not something else) – KarelG Aug 05 '19 at 09:10
Hum, interesting, I never saw this guy while debugging events generated by leaflet. Perhaps a way of finding which ones are generated events and which ones are user events! – Matthieu Brucher Aug 05 '19 at 10:21

score 3 · Answer 2 · answered Jun 02 '20 at 00:56

3

I know that this answer is event more quite late, but as in jquery you can use .off

map.on('click', doSomething);
map.off('click');

It works fine for any leaflet events.

I use it for 'zoomend' event to be triggered one time only.

map.on('moveend', function(e){
    console.log("any code");
    map.off('moveend');
});

answered Jun 02 '20 at 00:56

Noma

31
1

This is the only way which worked for me to catch the click event in a KML layer (the L.KML library to load it, L.featureGroup to catch the click event) but ignore it on "map" (L.Map). I wanted to catch click events on "map" only when clicked outside the KML layer (like in Google Maps). The only problem in the solution above is the later clicks are ignored, because the event handler is removed forever. You have to recreate it - delayed e.g. via setTimeout(function () { recreate the original event handler for map.on("click") }, 1). If you recreate it immediatelly, it gets called, too. – Ladislav Zima Aug 05 '21 at 01:03

score 2 · Answer 3 · edited Apr 13 '17 at 12:33

2

This one worked for me...

var div = L.DomUtil.get('div_id');
if (!L.Browser.touch) {
    L.DomEvent.disableClickPropagation(div);
    L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
    L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}

Thanks to https://gis.stackexchange.com/questions/104507/disable-panning-dragging-on-leaflet-map-for-div-within-map

edited Apr 13 '17 at 12:33

Community

1
1

answered Jan 09 '17 at 06:51

Dhrumil Bhankhar

1,301
1
14
15

score 0 · Answer 4 · answered Feb 12 '15 at 18:33

0

You can't override the event propagation from an event handler. You need to use the builtin Leaflet helper after the page has loaded, like this:

$('.element').each (i,el)->

  L.DomEvent.disableClickPropagation(el);

answered Feb 12 '15 at 18:33

picardo

24,530
33
104
151

score -1 · Accepted Answer · answered Apr 08 '14 at 09:09

-1

In the end I've solved the issue by manual removal of default click handler which was invoking the _collapse() method, as far as I remember. Dirty, but it did the trick.

answered Apr 08 '14 at 09:09

aga

27,954
13
86
121

score -3 · Answer 6 · edited May 23 '17 at 12:16

-3

You have use like this event.stopPropagation()

map.on('click', function(e) {  //don't forget to pass this 'e' event parameter
    e.preventDefault();
    scope.deselectAllMarkers();        
    e.stopPropagation();
    return false;     
});

Try anyone of this

1.event.stopPropagation()
2.event.preventDefault()
3.return false

edited May 23 '17 at 12:16

Community

1
1

answered Sep 04 '13 at 08:12

Praveen

55,303
33
133
164

I tried all of them - no luck. `L.DomEvent.preventDefault(e)` and `L.DomEvent.stopPropagation(e)` invoke `e.preventDefault()` and `e.stopPropagation()` respectively. – aga Sep 04 '13 at 08:30
Did you try your own answer ? – Alex Beugnet Oct 05 '17 at 15:19
map.on('click' does not pass the standard event object – pcnate May 28 '19 at 14:44

Stop propagation of 'click' event in Leaflet

6 Answers6

Linked