EaselJS onclick接管整个画布 [英] EaselJS onclick takes over entire canvas

问题描述

我正在使用canvas和EaselJS创建一个游戏，但是在onclick上做任何事情时，会出现一个问题，即删除窗口焦点。

I'm building a game using canvas and EaselJS but there is an issue when doing anything inside an onclick that removes window focus, ie. prompt, alert, window.open.

这是发生在FireFox和一些移动Android设备从我见过。

It happens in FireFox and on some mobile Android devices from what i've seen.

我想我明白为什么它是，但我不知道如何解决它（我不知道如何解释在一个句子，所以这个问题的标题不完全真实）

I think I understand why it is but I don't know how to fix it ( I didn't know how to explain in one sentence, so the title of this Question is not entirely true )

如果我在某个onclick中有提醒，例如

If I have an alert within an onclick like so

_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键以关闭警报，然后无论鼠标位于何处，直到它被移动，点击将触发相同的事件，并再次提醒....

if you click the target, the alert fires, move your mouse to whereever (still over the canvas though) hit enter to close the alert, and then no matter where the mouse is positioned, until it is moved, clicking will fire the same event, and alert again....

这只是一个真正的问题，在移动设备上，因为鼠标不能移动/触摸位置更新，所以然后点击屏幕总是触发第二个onclick，而在桌面上，只有当鼠标没有移动，因为关闭警报。

This is only really a problem on mobile devices, as the 'mouse' cannot be moved / touch position updated so then next tap on screen always fires the second onclick, whereas on Desktops it only does that if the mouse is not moved since closing the alert.

我认为这是一个问题的CreateJS库

I think this is an issue with the CreateJS Library itself as any examples on click events with and alert in have this issue.

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

I was thinking that there may be a way to force createjs to set mouseposition to 0,0

这里是可以找到问题的示例。

here is an example where the issue can be found..

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

推荐答案

stage.js ，因为鼠标在舞台中的位置不是

There's obviously a bug or limitation in stage.js due to the fact the mouse position in the stage isn't recomputed when the mouse is down, but only when the mouse moves (which can only be detected when the window is focused).

我可以通过添加以下内容来修复它：

I could fix it by adding this :

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

这个想法是重写标准 _handleMouseDown 函数将坐标传递到 _handlePointerDown ，以便重新计算位置。我不认为这种变化会妨碍性能（在所有相同的计算已经为每个移动完成后，我们也只是点击它）。

The idea is to override the standard _handleMouseDown function to pass the coordinates to _handlePointerDown so that the position is recomputed. I don't think this change would hinder the performance (after all the same computation is already done for each move and we're just going to do it on click too).

示范

更新： 我建议的修正已在库中加入，这个bug现在已经消失了（但是有些在线示范仍然使用旧版本的库）。

Update: The fix I suggested has been incorporated in the library, this bug is now gone (but some online demonstrations still use an old version of the library).

这篇关于EaselJS onclick接管整个画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！