javascript事件处理和z-index

Question

我目前有三个画布由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事件.有没有办法确保其他层也能捕获事件？

Answer 1

即使这个设置看起来很奇怪,我想你可以将处理程序放在画布外的div上,然后让每个画布调用你需要的事件.否则顶层将捕获鼠标事件.

Answer 2

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

编辑- 看看@jarrett的答案