我正在尝试将click事件绑定到画布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.

解决方法:

在Leaflet 1.0中,GridLayers不处理鼠标/触摸/指针事件(请注意,它们的events documentation没有列出指针事件,而有些是other layer types do).

此外,包含图块(< div class ='leaflet-tile-container>)的DOM元素具有指针事件：none; CSS规则.这使浏览器可以忽略指针事件(从而获得更好的性能).

您需要将事件附加到单元格本身(在自定义createTile()上),并覆盖指针事件CSS规则.