EaselJS onclick takes over entire canvas

问题

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.

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 )

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
});

//HOW TO REPRODUCE ISSUE

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....

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.

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

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/

回答1:

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);
};

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).

Demonstration

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).

来源：https://stackoverflow.com/questions/19246361/easeljs-onclick-takes-over-entire-canvas

标签

javascript

canvas

easeljs