javascript事件处理和z索引

我目前有三张画布，按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>

---

但是只有顶层画布（z-index:2）似乎捕捉到了我设置的mousedown/mouseup/mousemove事件。有没有办法确保其他层也能捕获事件？

没有，没有办法。通常情况下，鼠标事件模型是最顶层“捕获”鼠标交互，而在呈现文档时，该元素下的元素根本不会获取任何事件。对于普通的HTML标记，通常可以安排页面设计，使元素的“堆栈”按词汇嵌套在标记中，在这种情况下，浏览器将通过元素祖先冒泡事件。但是，对于画布元素，您不能真正做到这一点

---

编辑-查看@jarrett的答案

尽管这个设置看起来很奇怪，但我认为您可以将处理程序放在画布外的div上，然后对每个画布进行所需的事件调用。顶层将捕获鼠标事件，否则。

您不需要捕获后向层，它们的大小相同，因此您只需要获取一个层的事件并将其映射到其他层

编辑：

---

或者为什么不在一张画布上画画？

你到底想达到什么目的？