EaselJS 鼠标事件不起作用 - 调试画布似乎正在捕捉它们答案

【问题标题】：EaselJS mouse events not working - debug canvas appears to be catching themEaselJS 鼠标事件不起作用 - 调试画布似乎正在捕捉它们
【发布时间】：2014-11-12 00:19:17
【问题描述】：

我正在 HTML5 中构建一个应用程序，使用 CreateJS (EaselJS)、Box2D 并使用 Browserify 用 CoffeeScript 编写（使用 Gulp 构建)。

我刚刚花了半天的时间在键盘上敲打我的头，试图弄清楚为什么我的 EaselJS 事件无法正常工作。窗口/文档事件很好。任何和所有 EaselJS 事件都没有做任何事情。事实证明，调试画布将它们困住，以不可见的方式覆盖。

我最终通过打开和关闭调试画布意外发现了这一点，它允许事件通过并开始响应。

所以现在，我的问题是：处理事件的最佳方式是什么，以便它们能够正常工作

a) 无需我先切换调试画布，以及

b) 当调试处于活动状态时，如何将事件传递到下面的主画布以便它可以处理它们？

这可能吗？理想的情况是，即使启用了调试绘图，mouseevents 也能正常工作。

HTML 是这样的：

<body>
  <canvas id="arcade"></canvas>
  <canvas id="debug"></canvas>
    <button id="toggle-debug">Toggle Debug</button>

    <script src="compiled.js"></script>
</body>

我的应用程序类设置了从其构造函数调用 bindEvents 的事件：

bindEvents: =>
  # Pause when window is blurred
  window.addEventListener 'blur', @setPaused
  # Play when window is focused
  window.addEventListener 'focus', @setPlay
  # Toggle showing/hiding of the Debug <canvas>
  document.getElementById('toggle-debug').onclick = @toggleDebug

toggleDebug: =>
  @showDebug = !@showDebug
  # Shows/hides Debug canvas
  Universe.debug.canvas.style.display = (if @showDebug then 'block' else 'none')

setPlay: =>
  @play = true
  createjs.Ticker.setPaused false

setPaused: =>
  @play = false
  createjs.Ticker.setPaused true

我的对象（在@body 中包含box2d body，在@view 中包含easelJS 显示对象）以类似的方法设置它们的事件，例如

bindEvents: ->
  @view.on "click", () =>  alert("ball #{@options.id} clicked")

【问题讨论】：

标签： html events canvas coffeescript easeljs

【解决方案1】：

我已经通过将 html 更改为

解决了 a) 部分

<canvas id="debug" style="display: none;"></canvas>

我也尝试在游戏中以编程方式执行此操作（切换调试两次），但由于某种原因它不起作用。我不知道为什么。

不过，我仍然想得到 B 的答案。如何通过调试画布将鼠标事件传递到下面的画布。

【讨论】：

【解决方案2】：

不幸的是，DOM 没有提供忽略对象上的鼠标事件或传递它们的好方法。但是，您可以使用 Stage.nextStage 属性。

创建一个 EaselJS 阶段，并传入您的调试画布
将新舞台上的nextStage 属性设置为低于该舞台的舞台。

这是一个快速的代码示例：

var stage2 = new createjs.Stage("DebugCanvasId");
stage2.nextStage = stage1;

EaselJS 0.7.0 添加了 nextStage 属性，但 GitHub 中最新的 NEXT 版本极大地改进了对此的支持。 GitHub 中有一个演示，您可以在其中看到这个工作（TwoStages.html）。这是在线示例：http://createjs.com/Demos/EaselJS/TwoStages.html

干杯。

【讨论】：