javascript - leaflet.js 阻止某些事件的传播

Question

我遇到一个问题，我的 mouseenter、mouseleave、mouseover 和 mouseout 事件被吞没并且不发生火。

基本上，我的页面上有一张 map ，我在上面添加标记(divIcons)并绘制路径。除了这张 map 之外，我还有一个工具提示和上下文菜单，它们附加到各种标记和路径上的事件以便被激活。 map 不知道有关工具提示或上下文菜单的任何信息，因此事件由使用 jquerys on 方法的配置文件附加。

假设 divIcons 具有 markerElement 类，代码如下所示:

$(document).on('mouseenter', '.markerElement', function(){ console.log('ENTER'); });
$(document).on('mouseleave', '.markerElement', function(){ console.log('LEAVE'); });

我已将问题追溯到 leaflet-src.js 版本 0.7.3 第 6484 行的 stopPropagation 方法。如果我注释掉 e.stopPropagation() 我的事件起作用，我会对该方法与传单相关的目的感到有点困惑。

有没有其他方法可以让 mouseenter 和 mouseleave 事件附加到 map 上动态创建的元素，而 map 不知道它并且不更改传单来源？

上下文菜单和工具提示代码适用于不在 map 上的其他元素，因此可以基于某种选择器动态挑选元素的通用解决方案将是理想的。

感谢您的任何想法

Answer 1

也许您可以选择禁用 L.Marker 和 L.Path 上的所有事件，您可以使用 'clickable': false 来做到这一点 在他们的选项中。

还可以通过创建从 L.Marker 扩展的自定义标记来仅禁用某些事件，这里我注释掉了 mouseover 和 mouseout >:

L.CustomMarker = L.Marker.extend({

  _initInteraction: function () {

        if (!this.options.clickable) { return; }

        // TODO refactor into something shared with Map/Path/etc. to DRY it up

        var icon = this._icon,
            events = ['dblclick', 'mousedown', /*'mouseover', 'mouseout',*/ 'contextmenu'];

        L.DomUtil.addClass(icon, 'leaflet-clickable');
        L.DomEvent.on(icon, 'click', this._onMouseClick, this);
        L.DomEvent.on(icon, 'keypress', this._onKeyPress, this);

        for (var i = 0; i < events.length; i++) {
            L.DomEvent.on(icon, events[i], this._fireMouseEvent, this);
        }

        if (L.Handler.MarkerDrag) {
            this.dragging = new L.Handler.MarkerDrag(this);

            if (this.options.draggable) {
                this.dragging.enable();
            }
        }
    }

});

以下是 Plunker 的示例:http://plnkr.co/edit/naWEPz?p=preview

如果您想删除 L.Marker 的 clickevent 上的 stopPropagation，您也可以通过以类似的方式扩展 L.Marker 来实现:

L.CustomMarker = L.Marker.extend({

    _onMouseClick: function (e) {
        var wasDragged = this.dragging && this.dragging.moved();

        /*if (this.hasEventListeners(e.type) || wasDragged) {
            L.DomEvent.stopPropagation(e);
        }*/

        if (wasDragged) { return; }

        if ((!this.dragging || !this.dragging._enabled) && this._map.dragging && this._map.dragging.moved()) { return; }

        this.fire(e.type, {
            originalEvent: e,
            latlng: this._latlng
        });
    }
});

有点 hackish，但它应该可以工作，您可以对 L.Marker 中调用 stopPropagation 的其他方法执行相同的操作。 L.Path 也是如此，只需用您想要更改的方法扩展它，我认为您已经很好了(不知道如何正确测试它，所以我没有:D)祝你好运!