Leaflet Label noHide 无指针事件答案

【问题标题】：Leaflet Label noHide no pointer eventLeaflet Label noHide 无指针事件
【发布时间】：2013-11-25 14:26:42
【问题描述】：

我必须在我的地图上添加带有circleMarker 的自定义城市名称。但我想点击标签，因为它下面有多边形有我的JS代码添加circleMarker

var ville_label = new L.CircleMarker(
    [lat, lng], 
    { clickable: false, radius: (1/zoom)*12 }
).bindLabel(lib, { noHide: true, className: "leaflet-ville-label" })
.addTo(ville_layer);

在 CSS 中我禁用了指针事件

.leaflet-ville-label {
    pointer-events: none;
}

但 IE 不支持 pointer-events 并且 Label 是 div 元素而不是 SVG。

有人有解决方案来禁用静态标签上的指针事件吗？

【问题讨论】：

标签： internet-explorer leaflet pointer-events

【解决方案1】：

通过层转发鼠标事件可能会帮助您解决此问题。对于 ie 中缺少指针事件，这是一种解决方法。这是关于这个问题的一篇不错的博客文章：

Forwarding Mouse Events Through Layers

【讨论】：

是的，我已经测试过了，但是 document.elementFromPoint 无法返回地图 kml 元素。
我错过了隐藏 curretn 元素的一点。但我现在有一个 path 或 g 元素。你能从中得到多边形吗？
这是我找到的用于转换路径的功能：whaticode.com/2012/02/01/converting-svg-paths-to-polygons
我的意思是传单多边形。我可以通过传单看到生成 svg 代码，但没有附加事件。
此方法似乎不适用于我的图层数据。

【解决方案2】：

您不需要做更多的事情。

正如Click through a DIV to underlying elements 中所解释的，只要标签的背景是透明的，IE 9 和 10 就会转发事件。 IE 11等浏览器坚持

.leaflet-ville-label {
    pointer-events:none;
}

见http://jsfiddle.net/LHL82/7/

【讨论】：

编辑：我刚刚读到 IE 11 也遵守pointer-events:none。这意味着我无法在家用 PC 上检查 IE 的透明度。明天将检查 IE
我需要这个网站兼容 IE 8+ 这个解决方案在它上面不起作用。或者我做错了。
看起来是 IE9 及以上版本。
我可以确认此解决方案不适用于 IE，尤其是当您需要不透明的背景或边框时。

【解决方案3】：

我找到了解决方案，但不像我最初想的那样。

我使用 mapbox 库调用 leaflet-pip

详细流程：

检查我所有标签上的点击事件
地图拖动后不要触发点击（我在拖动开始时已经有noclick）
用mouseEventToLatLng(e)获取鼠标Lat Lng
得到这个 lat lng 的多边形
最后触发点击结果多边形

有我的代码来完成这个：

$(".leaflet-ville-label").off("click").on("click", function(e) {
    if ($(this).hasClass("noclick")) {
        $(".leaflet-ville-label").removeClass("noclick");
        return;
    }
    for (layer_id in kml_layer._layers) {
        var under_layer = leafletPip.pointInLayer(france.mouseEventToLatLng(e), kml_layer._layers[layer_id]);
        if (under_layer.length > 0) {
            under_layer[0].fire("click");
        }
    }
});

【讨论】：