Javascript and z-index event handling

Question

I currently have three canvases stacked on top of each other at the z-index.

<canvas width="800" height="600" id="test3_canvas" style="position: absolute; left: 0; top: 0; z-index:2"></canvas> <canvas width = "800" height="600" id="test2_canvas" style="position: absolute; left: 0; top: 0;z-index:1"></canvas> <canvas width="800" height="600" id="test1_canvas" style="position: absolute; left:0; top: 0;z-index:0"></canvas> 

But only the top layer canvas (z-index: 2) seems to capture the mousedown / mouseup / mousemove events that I configured. Is there a way to ensure that other layers will catch events as well?

Answer 1

No, there is no way to do this. As a rule, the model of mouse events consists in the fact that the topmost layer “captures” the interaction with the mouse, and the elements under this element simply do not receive any event at all when rendering a document. With the usual HTML markup, you can often arrange the page design so that your "stack" of elements is lexically nested in the markup, in which case the browser will bubble events through the element's family tree. However, you cannot do this with canvas elements.

edit - look at @jarrett's answer

Answer 2

Even though this setting seems strange, I think you could put a handler on a div outside the canvases, and then call that call, which you need for each canvas. Otherwise, the top layer will catch the mouse event.

Answer 3

You do not need to catch the reverse layers, they are the same size, so you only need to get events for one and match it in others.

Edit: Or why not draw only one canvas?