createjs prevents detection of mousedrag in outside iframe

[danielsedlacek]

My problem sounds complicated but what I need it simple: same as in a Google Map, I want to track mouse position while panning the map (drag and move), even if the map is embedded in a crossdomain iframe and the mouse is already outside the iframe.

Surprisingly, simply adding a listener on "mousemove" to the whole window (inside the iframe) returns the coordinates also outside the iframe - if only you are not just moving your mouse but you started dragging inside the iframe.

Try this: http://fiddle.jshell.net/1L4gajzf/1/

If you start dragging in the canvas, you can track the mouse also outside of the main window (iframe).

The problem is, when I initialize createjs, this functionality stops working. Just uncomment the first line. The event is still captured on the window but even if you start dragging inside the canvas you will not get mouse coordinates when you move outside of the iframe.

What is createjs doing that it breaks this functionality?

[gskinner]

It looks like this is due to the stage.preventSelection functionality. For some reason, calling preventDefault() on the mousedown event (which is what preventSelection does) also prevents mousemove events outside the iFrame.

For now, you can solve by setting preventSelection to false, and then use CSS to disable selection (if you need that functionality). Longer term, we should look into using CSS internally.

Updated your example to show the issue and solution:
http://fiddle.jshell.net/1L4gajzf/2/

I'll leave this open until we have a chance to dig into it more.

[danielsedlacek]

That's exactly it, thanks!

On a related note, only after setting preventSelection to false mouseMoveOutside started working as intended, see http://fiddle.jshell.net/1L4gajzf/3/. I guess this is a defect.

What is also interesting, in your Drag & Drop example if you replace

evt.target.x = evt.stageX;

with

evt.target.x = evt.nativeEvent.pageX * (window.devicePixelRatio || 1);

the dragging outside of the stage will not be limited to the "inside" coordinate as in your example but will be unlimited as in Google Map embed.