I have a simple question that has me stumped:

In a Leaflet application, I have an event listener for clicking elements on the map:

marker.on('click', function () {
            doStuff();
            $('element').doStuff();
            setView(this.getLatLng());
        });

However, the setView method also triggers a 'map moved' event, which I do not want to fire. Using either plain JavaScript or jQuery, can I prevent any other event from firing while inside the click event function?

Edit: now with a Fiddle! To use it, just click anywhere on the map. As you can see, e.stopPropagation() does not work when placed inside the click event listener.

/

I have a simple question that has me stumped:

In a Leaflet application, I have an event listener for clicking elements on the map:

marker.on('click', function () {
            doStuff();
            $('element').doStuff();
            setView(this.getLatLng());
        });

However, the setView method also triggers a 'map moved' event, which I do not want to fire. Using either plain JavaScript or jQuery, can I prevent any other event from firing while inside the click event function?

Edit: now with a Fiddle! To use it, just click anywhere on the map. As you can see, e.stopPropagation() does not work when placed inside the click event listener.

http://jsfiddle/gc6e4jbg/

• javascript
• jquery
• leaflet

Share Improve this question Follow edited Jan 28, 2015 at 14:37 Dave R. 7,30333 gold badges3232 silver badges5353 bronze badges asked Jan 28, 2015 at 9:32 yesmanyesman 7,8581616 gold badges6363 silver badges127127 bronze badges 4

• can you show the setView function – atmd Commented Jan 28, 2015 at 9:35
• For this you need to modify setView as setView space is outside click event. – Innovation Commented Jan 28, 2015 at 9:36
• The setView function is a standard Leaflet function, and I would prefer not to edit the library itself. I posted a JSFiddle for your perusal. – yesman Commented Jan 28, 2015 at 9:50
• e.stopPropagation only works for the e (event) that you are calling it on. What you will need to do is write some custom functionality (extending the library may be best) or refactor your code - why are you using both click and mouseend for this particular element? Do you need to be? – Stevie Commented Jan 28, 2015 at 10:15

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

I don't believe you can prevent moveend being fired. (NB: these aren't jQuery events - Leaflet has its own internal event system.) This is the source for setView:

setView: function (center, zoom) {
    zoom = zoom === undefined ? this.getZoom() : zoom;
    this._resetView(L.latLng(center), this._limitZoom(zoom));
    return this;
}

_resetView always fires moveend at the end:

_resetView: function (center, zoom, preserveMapOffset, afterZoomAnim) {
    var zoomChanged = (this._zoom !== zoom);
    if (!afterZoomAnim) {
        this.fire('movestart');
        if (zoomChanged) {
            this.fire('zoomstart');
        }
    }

    ...

    this.fire('moveend', {hard: !preserveMapOffset});
}

You could investigate customizing these functions to allow for suppression of the event.

Update:

Alternatively, you could change your moveend event handler. Have it track a flag, which you set when you don't want the normal operations to happen.

For example, you'll have set up your handler similar to:

map.on('moveend', myHandler);

Have myHandler do something like:

function myHandler(e) {
    if (stopFlag) {
        return;
    }
    else {
        // Normal operation
        ...
    }
}

Then just enable and disable stopFlag to control the flow. The advantage of this is that you don't have to publish a custom version of Leaflet with your application.

To be straight to the point: that will never work. By using stopPropagation/preventDefault you stop the click event from bubbling up through the dom. Nothing else. Once you execute L.Map's setView method it will always fire the moveend event, it's got nothing to do with the click event. It will also the fire movestart and move events and even the resetview event if you also set the zoomlevel in setView. That's just the way Leaflet works. You could always extend L.Map to write you own logic but i'm guessing you're better of finding another solution to your problem.

Here is my a bit more hackish solution.

At the beginning

Set moveend to true as a default value.

var moveend = true;

Inside a click event

Set moveend to false.

moveend = false;
map.setView(new L.LatLng(lat, lng));

moveend event

Do something if moveend is true. No matter what, set moveend to true for next run.

map.on('moveend', (e) => {
  if (moveend) {
    // Do something if moveend is enabled
  }
  moveend = true;
});

Use event.stopPropagation(), see the docs

marker.on('click', function (e) {
    e.stopPropagation();
}