传单.js阻止某些事件的传播

leaflet.js stops certain events from propagating

本文关键字：事件 传播 js 传单      更新时间：2023-09-26

我有一个问题，我的mouseenter、mouseleave、mouseover和mouseout事件被吞噬并且没有触发。

基本上，我的页面上有一张地图，我添加了标记（divIcons）并绘制了路径。与此地图分开，我有一个工具提示和上下文菜单，它们附加到各种标记和路径上的事件以便激活。映射不知道有关工具提示或上下文菜单的任何信息，因此事件由使用 jquerys on方法的配置文件附加。

假设divIcon 具有类markerElement代码如下所示：

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

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

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

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

感谢您的任何想法

也许您可以选择禁用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
        });
    }
});

有点黑客，但它应该可以工作，您可以在调用stopPropagation L.Marker中使用其他方法做同样的事情。L.Path也是如此，只需使用您想要更改的方法扩展它，我认为您很高兴（不知道如何正确测试这一点，所以我没有:D）祝你好运！

相关文章：