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事件。有没有办法确保其他图层也能捕获这些事件？

- Leah Xue

---

你究竟想要实现什么目标？ - Tom Gullen

Answer 1

虽然这种设置看起来很奇怪，但我认为你可以将处理程序放在画布之外的 div 上，然后让该事件调用每个画布所需的内容。否则顶层将捕获鼠标事件。

- Jarrett Widman

Answer 2

不，没有办法做到这一点。通常，鼠标事件模型是最上层的图层“捕获”鼠标交互，而在文档渲染中该元素下面的元素根本不会得到任何事件。使用普通的HTML标记，通常可以安排页面设计，使您的元素“堆栈”在标记中词法嵌套，在这种情况下，浏览器将通过元素祖先级别传递事件。然而，对于canvas元素，你不能真正做到这一点。

编辑 - 请看@jarrett的答案。

- Pointy

Answer 3

您不需要捕获后向层，因为它们是相同大小的，所以您只需要获取其中一个事件并将其映射到另一个事件中。

编辑: 或者为什么不在一个画布上绘制？

- Eric Fortis