Question

我有一个简单的问题让我难过：

在Leaflet应用程序中，我有一个用于点击地图上元素的事件监听器：

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

然而，setView方法还会触发一个＆＃39;地图移动＆＃39;事件，我不想解雇。使用普通的JavaScript或jQuery，我可以阻止在click事件函数内部触发任何其他事件吗？

编辑：现在用小提琴！要使用它，只需单击地图上的任意位置即可。如您所见，当放置在click事件侦听器中时，e.stopPropagation（）不起作用。

http://jsfiddle.net/gc6e4jbg/

Answer 1

我不相信你可以阻止moveend被解雇。（注意：这些不是jQuery事件 - Leaflet有自己的内部事件系统。）这是setView的来源：

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

_resetView总是在最后触发moveend：

_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});
}

您可以调查自定义这些功能以允许抑制事件。

<强>更新

或者，您可以更改moveend事件处理程序。让它跟踪一个标志，当你不希望正常的操作发生时，你会设置一个标志。

例如，您已将您的处理程序设置为类似于：

map.on('moveend', myHandler);

让myHandler做类似的事情：

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

然后启用并禁用stopFlag来控制流量。这样做的好处是您不必在您的应用程序中发布Leaflet的自定义版本。

Answer 2

直截了当：这将永远不会奏效。通过使用stopPropagation / preventDefault，您可以阻止click事件通过dom冒泡。没有其他的。执行L.Map setView方法后，它将始终触发moveend事件，它与click事件无关。如果您还在movestart中设置了缩放级别，它还会触发move和resetview个事件以及setView事件。这就是Leaflet的工作方式。您可以随时扩展L.Map来编写自己的逻辑，但我猜你最好找到解决问题的另一种解决方案。

Answer 3

使用event.stopPropagation（），see the docs

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

Answer 4

这是我更棘手的解决方案。

开头

将moveend设置为true作为默认值。

var moveend = true;

点击事件内部

将moveend设置为false。

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

移动事件

如果moveend是true，请执行一些操作。无论如何，将moveend设置为true以便下次运行。

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

防止在setView之后在Leaflet中触发moveend事件

4 个答案:

开头

点击事件内部

移动事件