Question

我试图将click事件绑定到leaflet插件的画布GridLayer扩展（使用Leaflet 1.0，Leaflet.MaskCanvas）。

From the Leaflet Documentation about 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');
});

但上述情况似乎都没有奏效。

Here's a fiddle我在分析和调整了MaskCanvas插件中的示例代码。

还有其他方法可以将单击绑定到Leaflet中的画布层吗？

修改：.on()和.addEventListener()是别名。

以前这个问题涉及Leaflet 0.7和TileLayer。从old Leaflet Documentation开始，看起来TileLayer没有这些事件。 JSFiddle代码已更新为使用Leaflet 1.0。

Answer 1

在Leaflet 1.0中，GridLayer s不处理鼠标/触摸/指针事件（注意他们的events documentation 不列出指针事件，而有些other layer types do ）。

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

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

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

1 个答案: