Question

我正在 HTML5 中构建应用，使用 CreateJS（EaselJS）， Box2D ，并使用Browserify（使用Gulp构建）使用CoffeeScript编写）。

我刚刚花了半天的时间来击打键盘，试图找出为什么我无法让我的EaselJS活动正常工作。窗口/文档事件很好。任何和所有EaselJS事件都没有做任何事情。结果是调试画布正在捕获它们，无形地覆盖。

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

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

a）没有我首先切换调试画布和

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

这可能吗？理想的是，即使启用调试，鼠标事件也能正常工作。

HTML就是这样：

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

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

我的app类设置从其构造函数调用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正文和@view中的easelJS显示对象）以类似的方式设置事件，例如。

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

Answer 1

不幸的是，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

干杯。

Answer 2

我已经通过将html更改为

来解决了部分问题

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

我也试过在游戏中以编程方式执行此操作（切换调试两次）但由于某种原因它无法正常工作。我不知道为什么。

我仍然希望得到B的答案。如何通过调试画布将鼠标事件传递给下面的那个。

EaselJS鼠标事件无法正常工作 - 调试画布似乎正在捕捉它们

2 个答案: