How do I register a click event on the bottom canvas of two layered canvases

Question

I have a game I'm working on which will have multiple canvases. One for the map, another for user interface, another for game objects, etc. The user interface canvas will be the top most canvas, but I'm wondering, if I wanted to register a click event on say, the map layer, how would I do so with the ui canvas being on top of every other canvas? As it stands now, when I click, it only registers the click on the ui canvas, which is what it's supposed to since it's sitting on top of the others. How do I register the click on one of the other canvases instead?

CSS

canvas{
    position: absolute;
}

#ui{
    bottom: 0;
    z-index: 5;
}

#basemap{
    z-index: 0;
}

HTML

<canvas id="ui"></canvas>
<canvas id="basemap"></canvas>

JS

var canvases = document.getElementsByTagName("canvas");

for(var i = 0; i < canvases.length; i++){
    canvases[i].onclick = function(){
        console.log(this);
    }
}

Pen

Answer 1

Set pointer-events to none on the #ui element. This will cause pointer-related events to be ignored by #ui and pass through to the underlying element:

#ui{
    bottom: 0;
    z-index: 5;
    pointer-events: none;
}

Answer 2

Set pointer-events CSS attribute to none on #ui element, it will disable the click on it.

#ui {
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

Pointers event information

Answer 3

The canvas does not provide a UI so you don't need to register both canvas events. You will be needing to check the click, mousedown, mouseup events against the UI coordinates and current mouse state (dragging). If the mouse is over a UI graphic you handle the UI requirements, if not you handle the game map's needs. As the mouse coordinates will be the same for both canvas there is no point in adding an additional redundant event listener, it will only make the code overly complex.

Additionally you should not react to mouse events in the event handlers. Mouse event handlers can fire much more often than the canvas will be updated. You should use the event handlers to just record the current mouse state (location, buttons down) and in the main game loop is where you handle the mouse interaction. This will reduce the amount of code that needs to run per mouse event and greatly simplifies the code.

Mouse event handlers are designed to simplify the interaction with individual UI components, the canvas breaks the paradigm by not being able to define the UI / map components as distinct registrable items with events. Treating the canvas as if it is a DOM will be a disadvantage to the overall code quality and game performance.