【问题标题】:EaselJS onclick takes over entire canvasEaselJS onclick 接管整个画布
【发布时间】:2013-10-15 07:07:29
【问题描述】:

我正在使用画布和 EaselJS 构建游戏,但是在 onclick 内执行任何操作时都会出现问题,即移除窗口焦点。提示,警报,window.open。

据我所知,它发生在 FireFox 和一些移动 Android 设备上。

我想我明白为什么会这样但我不知道如何解决它(我不知道如何用一句话解释,所以这个问题的标题并不完全正确)

如果我在这样的 onclick 中有警报

_t.container.on('click', function(e) {
    alert('test');
    //end
    e.preventDefault();
    e.nativeEvent.preventDefault();
    return false; //all of these added when trying to find a work around
});

//如何重现问题

如果您单击目标,则会触发警报,将鼠标移动到任何位置(尽管仍然在画布上)按 Enter 以关闭警报,然后无论鼠标位于何处,直到它被移动,单击都​​会触发同样的事件,并再次提醒......

这只是移动设备上的真正问题,因为“鼠标”无法移动/触摸位置更新,因此下一次点击屏幕总是会触发第二次点击,而在台式机上只有当鼠标没有移动时才会这样做自从关闭警报。

我认为这是 CreateJS 库本身的问题,因为任何有关单击事件和警报的示例都有此问题。

我在想可能有一种方法可以强制 createjs 将鼠标位置设置为 0,0

这是一个可以找到问题的示例..

http://www.ajohnstone.com/test/hackday/CreateJS-EaselJS-b262a85/tutorials/Mouse%20Interaction/

【问题讨论】:

  • 如果您必须使用警报或焦点丢失功能,那么也许您可以在处理程序中使用 hitTest 函数来检查点击是否真的在容器上。
  • 这不会给出与 createjs 仍然认为鼠标处于原始位置相同的结果。与其说是警报,不如说是 window.open
  • hitTest 以 x 和 y 作为参数,可以传递事件坐标。但是我没有测试(必须建立一个测试用例)。
  • 好点,我只是做了一个日志,通过事件传递的 stageX 和 stageY 保持不变,但是在 e.nativeEvent 内部他们已经更新,我看看...
  • @dystroy rawX 和 rawY 对我来说总是匹配 stageX 和 stageY,因为 e.nativeEvent.layerX 和 Y 似乎可以工作,所以将它添加到函数的顶部似乎可以解决它。 if(!_t.container.hitTest(e.nativeEvent.layerX-_t.container.x, e.nativeEvent.layerY-_t.container.y)) return;

标签: javascript canvas easeljs


【解决方案1】:

stage.js 中显然存在错误或限制,因为当鼠标按下时不会重新计算舞台中的鼠标位置,而只会在鼠标移动时重新计算(只有在窗口聚焦时才能检测到)。

我可以通过添加这个来修复它:

stage._handleMouseDown = function(e) {
    this._handlePointerDown(-1, e, e.pageX, e.pageY);
};

这个想法是覆盖标准的_handleMouseDown 函数以将坐标传递给_handlePointerDown,以便重新计算位置。我不认为这种变化会影响性能(毕竟每次移动都已经完成了相同的计算,我们也将在点击时进行)。

Demonstration

更新: The fix I suggested 在库中已经是 incorporated,这个错误现在已经消失了(但是一些在线演示仍然使用旧版本的库)。

【讨论】:

  • Rory,如果您确认它适合您,我们可能会建议更改代码,我认为有充分的理由。
  • @RoryPicko92 我提交了一个问题:github.com/CreateJS/EaselJS/issues/375
  • @RoryPicko92 我建议的修复被接受用于下一个构建。这意味着库将不再有错误。
猜你喜欢
  • 2013-03-29
  • 2012-06-07
  • 1970-01-01
  • 2016-10-01
  • 2016-12-24
  • 2018-11-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多