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.
You need to set the ImageOverlay interactive, then it is clickable:
var newOverlay = L.imageOverlay(imageUrl, imageBounds, {interactive: true}).addTo(map);
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>