javascript - GWT - 允许鼠标事件在两个叠加的 Canvas 之间传播

Question

我有一个 GWT 应用程序，其中包含两个叠加的 Canvas 实例，即在屏幕上具有相同的位置，一个在另一个之上。 (请参阅 http://dev.opera.com/articles/view/html5-canvas-painting 、 http://html5.litten.com/using-multiple-html5-canvases-as-layers 以获取有关如何完成的示例。我的代码与第二个链接更相似)。

对于下层 Canvas ，我实现了各种鼠标事件处理程序 - mouseUp、mouseDown、mouseMove 等。我没有为上层 Canvas 实现此类处理程序。此外，如果这有什么不同的话，上层 Canvas 大部分是透明的。

两个 Canvas 具有相同的父级(一个 div 元素)。

我的问题是下方 Canvas 的鼠标事件处理程序不执行。

我的猜测是上层 Canvas 捕获事件，并且它们不会传播到下层 Canvas 。你知道解决这个问题的方法吗？有没有办法告诉 GWT 小部件“吞下”鼠标事件？

谢谢!

Answer 1

您可以使用 GWT 自定义事件 ( GWT Custom Event ) 来解决这个问题。将 mouseUp、mouseDown、mouseMove 处理程序附加到上层 Canvas ，并将 Gwt 自定义事件处理程序实现到下层 Canvas 。现在当 MouseUp 或 MouseDown 事件发生时在上层 Canvas 中触发触发一个自定义事件，该事件将被下层 Canvas 捕获。希望这有帮助