我目前有三个画布由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事件。有没有办法确保其他层也能捕获事件？
答案 0 :(得分：6)
即使这个设置看起来很奇怪，我认为你可以把处理程序放在画布外面的div上，然后让每个画布调用你需要的事件。否则顶层将捕获鼠标事件。
答案 1 :(得分：2)
不，没有办法做到这一点。通常，鼠标事件模型是最顶层“捕获”鼠标交互，并且在文档呈现中该元素下面的元素根本不会获得任何事件。使用普通的HTML标记，通常可以安排页面设计，使得元素的“堆栈”在词法上嵌套在标记中，在这种情况下，浏览器将通过元素祖先冒泡事件。但是，使用canvas元素，你无法真正做到这一点。
编辑 - 查看@ jarrett的回答
答案 2 :(得分：2)
您不需要捕捉向后的图层，它们的大小相同，因此您只需要为一个事件获取事件并将其映射到其他图层。
修改 或者为什么不只画一幅画布？