如何将点击事件绑定到Leaflet画布GridLayer

Question

我正在尝试将单击事件绑定到传单插件的画布 GridLayer 扩展（使用 Leaflet 1.0 和Leaflet.MaskCanvas）。

从有关 GridLayer 的传单文档中，我希望我可以将单击绑定到coverageLayer使用

// add event listener to determine when layer has been clicked
coverageLayer.on('click', function(e) {
  console.log('clicked the line');
});
// second (alias) method to add event listener
coverageLayer.addEventListener('click', function(e) {
  console.log('clicked the line');
});

但以上方法似乎都不起作用。

这是一个小提琴，我在其中分叉并调整了 MaskCanvas 插件的示例代码。

是否有其他方法将点击绑定到 Leaflet 中的画布层？

编辑：.on()和.addEventListener()是别名。

之前的问题涉及 Leaflet 0.7 和 TileLayer。从旧的 Leaflet Documentation来看，TileLayer 似乎没有这些事件。JSFiddle 代码已更新为使用 Leaflet 1.0。

Answer 1

在 Leaflet 1.0 中，GridLayers 不处理鼠标/触摸/指针事件（请注意，它们的事件文档没有列出指针事件，而其他一些图层类型则列出）。

此外，包含图块 (a <div class='leaflet-tile-container>) 的 DOM 元素具有pointer-events: none;CSS 规则。这使得浏览器忽略指针事件（给它带来一点点更好的性能）。

您需要将事件附加到单元格本身（在自定义时createTile()）并覆盖pointer-eventsCSS 规则。