CODEWITHSUNDEEP
javascriptdom-events
Leah Xue
Leah Xue

Reputation: 635

JavaScript event handling and z-index

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?

Upvotes: 5

Views: 4019

Answers (3)

Eric Fortis
Eric Fortis

Reputation: 17360

You don't need to catch the backward layers, they are the same size, so you only need to get the events for one and map it to in the others.

Edit: Or why not drawing on only one canvas?

Upvotes: 2

Jarrett Widman
Jarrett Widman

Reputation: 6439

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.

Upvotes: 6

Pointy
Pointy

Reputation: 413826

No, there's not a way to do that. Generally the mouse event model is that the topmost layer "catches" the mouse interaction, and elements underneath that element in the rendering of the document just don't get any event at all. With ordinary HTML markup it's often possible to arrange the page design such that your "stack" of elements are lexically nested in the markup, in which case the browser will bubble the events through the element ancestry. With canvas elements, however, you can't really do that.

edit — look at @jarrett's answer

Upvotes: 2

Related Questions