javascript - EaselJS onclick 接管整个 Canvas

Question

我正在使用 Canvas 和 EaselJS 构建游戏，但是在删除窗口焦点的 onclick 中执行任何操作时会出现问题，即。提示、警报、窗口打开。

据我所知，它发生在 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
});

//如何重现问题

如果您单击目标，将触发警报，将鼠标移动到任何地方(尽管仍在 Canvas 上)按 Enter 键关闭警报，然后无论鼠标位于何处，直到它移动为止，单击都会触发同样的事件，再次提醒....

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

我认为这是 CreateJS 库本身的问题，因为任何关于点击事件和警报的示例都有这个问题。

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

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

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

Answer 1

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

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

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

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

Demonstration

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