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

Question

I'm trying to bind a click event to a leaflet plug-in's extension of a canvas GridLayer (using Leaflet 1.0, with Leaflet.MaskCanvas ).

From the Leaflet Documentation about GridLayer , I would expect that I could bind a click to coverageLayer using either

// 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');
});

but neither of the above seem to be working.

Here's a fiddle where I've forked and tweaked the example code from the MaskCanvas plugin.

Is there some other way to bind a click to a canvas layer in Leaflet?

Edit: .on() and .addEventListener() are aliases.

Previously the question dealt with Leaflet 0.7, and TileLayer. From the old Leaflet Documentation , it appears that TileLayer did not have these events. JSFiddle code has been updated to use Leaflet 1.0.

Answer 1

In Leaflet 1.0, GridLayer s do not handle mouse/touch/pointer events (notice their events documentation does not list pointer events, whereas some other layer types do ).

Furthermore, the DOM element containing the tiles (a <div class='leaflet-tile-container> ) has a pointer-events: none; CSS rule. This makes the browser ignore pointer events (giving it a tiny bit of better performance).

You'll need to attach the events to the cells themselves (when on your custom createTile() ) and override the pointer-events CSS rule.