javascript - "Label tileLayer"黑客攻击导致无法点击的覆盖层

Question

使用 this question 中的代码我成功地在我的覆盖层上方添加了地点/道路标签的tileLayer。然而，这产生了不幸的副作用，即阻止对下面的覆盖层的任何点击。

总的来说，如何重新启用对顶部tileLayer下方的图层/对象的点击检测？

参见this example我在顶部添加了一层标签:

var CartoDB_PositronOnlyLabels = {
    "tilejson": "2.0.1",
    "tiles":['http://c.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png'], 
    "attribution": '&copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
    "maxzoom": 19,
    "minzoom": 13       
};

var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
var labelLayer = L.mapbox.tileLayer(CartoDB_PositronOnlyLabels).addTo(map);
topPane.appendChild(labelLayer.getContainer());
labelLayer.setZIndex(9);

更新最初这是一个问题，因为我使用特殊的绘制函数通过单击将航路点添加到路线来绘制路线。添加tileLayer后，用户仍然可以添加航点。但他们无法拖动航点来移动路线，也无法单击最后一个点来结束路线。

我通过将标签tileLayer的ZIndex设置为5来解决这个问题，这样它就会位于覆盖层(zIndex:4)和标记层(zIndex:6)之间。然而，我仍然想知道是否可以在tilelayer下有一个可点击的覆盖层。

Answer 1

我在位于功能/叠加层之上的图 block /图 block 层上尝试使用CSS规则pointer-events: none。当设置为 none 时，图像不应响应任何鼠标/光标事件，因此每个事件都应委托(delegate)给其下方的图层:

指针事件:

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.

无:

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

https://developer.mozilla.org/en/docs/Web/CSS/pointer-events