title: javascript event handling and z-index
body: <p>I currently have three canvases layered on top of each other by z-index.    </p>
  
  <pre><code> &lt;canvas width="800" height="600" id="test3_canvas" style="position: absolute; left: 0; top: 0; z-index:2"&gt;&lt;/canvas&gt;
  
      &lt;canvas width = "800" height="600" id="test2_canvas" style="position: absolute; left: 0; top: 0;z-index:1"&gt;&lt;/canvas&gt;
  
      &lt;canvas width="800" height="600" id="test1_canvas" style="position: absolute; left:0; top: 0;z-index:0"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>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?</p>