Can't click Leaflet imageOverlay because of canvas which is above it-CodePudding

If I add an image to Leaflet map as an overlay with the code

let newOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(mapObj);
newOverlay.addEventListener('click', (e) => {
    let thisImg = e.currentTarget;
    console.log(thisImg);
});

I see my image on the map, but when I click it, the <canvas> element is clicked which is above the image with z-index: 100 and extends to the full width and height of the screen. If I add z-index: 200 to the image, it doesn't help.

Maybe it's more HTML/CSS issue than Leaflet and JS, but I'm not sure and can't resolve.

CodePudding user response：

You need to set the ImageOverlay interactive, then it is clickable:

var newOverlay = L.imageOverlay(imageUrl, imageBounds, {interactive: true}).addTo(map);

CodePudding user response：

Assuming you don't want to react to a click on any part of the overlying canvas you could set it to have pointer-events: none

Here's a trivial example where the top element does not react to a click:

.under,
.over {
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.under {
  background-color: pink;
}

.over {
  background-color: rgba(0, 0, 255, 0.5);
  pointer-events: none;
}

<div class="under" onclick="alert('under clicked');"></div>
<div class="over" onclick="alert('over clicked');"></div>