javascript event handling and z-index

Question

I currently have three canvases layered on top of each other by 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 be catching the mousedown/mouseup/mousemove events I've set up. Is there a way to ensure that the other layers also catch the events?

Answer 1

Even though this setup seems weird, I think you could put the handler on a div outside the canvases and then have that event call whatever you need for each canvas. The top layer is going to catch the mouse event otherwise.