Question

我遇到问题，我的mouseenter，mouseleave，mouseover和mouseout事件被吞下并且不会被触发。

基本上我的页面上有一张地图，我添加了标记（divIcons）和绘制路径。与此地图分开，我有一个工具提示和上下文菜单，可以附加到各种标记和路径上的事件，以便激活。地图对工具提示或上下文菜单一无所知，因此事件由使用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事件附加到地图上动态创建的元素，而地图不知道它并且不更改传单来源？

上下文菜单和工具提示代码适用于不在地图上的其他元素，因此可以根据某种选择器动态选择元素的一般解决方案是理想的。

感谢您的任何想法

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的{{1}}中的其他方法做同样的事情。同样适用于stopPropagation，只需使用您想要更改的方法进行扩展即可，我认为您很高兴（不知道如何正确测试，所以我没有＆＃39; t：D）祝你好运！

leaflet.js阻止某些事件传播

1 个答案: