Sprite's onInputUp doesn't fire if off canvas in IE11. Is there a fix?

[kleepklep]

IE11 is not detecting my sprite's onInputUp events if I drag outside of the canvas and release the mouse button. It works just fine in Firefox 39 and Chrome 44. I have a sprite following the cursor position after the user clicks on it (I'm using an onInputDown event). Since the onInputUp event isn't captured off canvas, the sprite continues to follow the cursor until it is clicked on and released again, which is problematic in my game.

 

Does anyone know if there is a fix for this? I'd prefer not to have to use some sort of game.input.mouse.mouseOutCallback hack that triggers a simulated mouse release if I don't have to (if that's even possible). Would prefer to make the IE version work just like the Firefox and Chrome versions.

[kleepklep]

Some more info.

This does not work in IE11 if you click on the game, drag off of it, then release the mouse.

game.input.mouse.mouseUpCallback  = function (e) {	console.log('mouseUpCallback');};

Nor does this, which seems to indicate that this is not a problem with Phaser, but a problem with IE. I'm guessing mouseup can't happen because the mousedown happens on the canvas, not on the window.

window.addEventListener('mouseup', function(e) {	console.log('mouseup');}, false);

Also, tried putting this in the update loop. I was hoping that I could keep checking if the mouse button was down. However, it always reads -1 in IE or Chrome.

if (game.input.mouse.button === -1){	console.log('mouse button not pressed!');}

So for now it seems I'm stuck with either releasing my sprite on game.input.mouse.mouseOutCallback even if the mouse button is still down, or doing something like this: http://www.html5gamedevs.com/topic/7545-how-to-stop-dragging-when-mouse-out-of-the-screen/.

Will post if I figure out how to emulate the behavior in Firefox and Chrome instead.

[kleepklep]

Though this does work as far as knowing if the mouse button is no longer pressed when moving back onto the game, I have to click on the game once before I am able to get my sprite to reacts to its onInputDown event. Maybe the game has to be forced back into focus? Not sure if there is a focus function I can call or whether I'd have to simulate a click on the game. There must be a simpler fix here!

game.input.mouse.mouseOverCallback = function (e) {	console.log("Mouse entered game canvas", e.buttons);	if (e.buttons === 0) {		//mouse returned with the button released, add code to stop dragging		console.log('stop dragging');	}}

[kleepklep]

Some more insight into the mouseup issue. My Phaser game is blocking the mousedown in IE. It does not do this in Firefox or Chrome. Can be tested like so:

 

document.body.addEventListener('mousedown', function(){	console.log('mousedown');});document.body.addEventListener('mouseup', function(){	console.log('mouseup');});

Also, game.input.activePointer.isDown will still read as true if released outside the canvas in IE11, so it can't be used in the update loop as an alternate method of detection.

[kleepklep]

I'm getting closer. Now all I have to do is figure out how to make it so you don't have to click on the game before you can interact with it again. Is it possible to trigger an event like this car.events.onInputUp.add(onReleaseCar, this) rather than calling its function. Maybe that would help. I'm guessing using a signal. http://phaser.io/docs/2.4.2/Phaser.Signal.html#dispatch

 

// IE11 hack to handle if mouse is drug off canvas and released outside it// mouseup is not fired, but click is$('#game').on('click mouseup', function (e) {	console.log('ie', game.device.ie, 'ieVersion', game.device.ieVersion);	if (game.device.ie) {		// include false positive in case other versions of ie don't have this problem		if (game.input.activePointer.isDown){			console.log(e.type + ' event fired at coords: ' + e.pageX + ', ' + e.pageY, 'withinGame', game.input.activePointer.withinGame, 'isDown', game.input.activePointer.isDown);			game.input.activePointer.reset();//doesn't help with focus issue			if (car.state == 'driving') {				onReleaseCar();			}		}	}});

Why I went this route in this case:

- these give false readings: game.input.activePointer.withinGame, game.input.activePointer.isDown

- x, pageX, screenX don't register outside of game

- mouseup is not fired, but click is (not sure why mouseup works here http://jsfiddle.net/ZFefV/ but not with Phaser)

- triggering fake mouse events in JS didn't help

[kleepklep]

Another frustrating discovery. Even if I force the focus back onto the canvas and simulate a click on it using the methods shown here http://stackoverflow.com/questions/29992688/how-to-keep-the-focus-on-a-canvas-always the game still has to be clicked on once before I can interact with its elements.

I realize I'm talking to myself here, but I'm hoping that someone who reads my posts will gain enough insight from the info that they might be able to share a solution.

And yes, I'm now starting to think about throwing some money around in order to get that solution.

[JRVisualsLLC]

Heya -- I'm running into something similar... I've worked through a few IE related issues... but this click to regain focus then click to interact thing is still killing me.

 

There's a similar ( I think ) discussion here... I didn't want to cross-post the details: http://www.html5gamedevs.com/topic/16441-how-can-i-force-my-game-to-be-in-focus/

 

I assumed that you've tried adding mouseOutCallback that then calls the element's .focus() -- and that the canvas element includes a tabindex='1' attribute?

 

Let me know if you get any closer.

[kleepklep]

Hi JRVisualsLLC,

That other post is also mine. I figured I might have better luck getting that piece of the puzzle solved if I posted a topic specific to the issue. Yes, I had tried the focus technique you described and had no luck.

In my desperation, I cross posted in the Phaser issues forum at https://github.com/photonstorm/phaser/issues/2000 and the issue was addressed in the latest dev release! Now I just have to hope it doesn't blow up my game. When I last tried to update from Phaser 2.3.0 the top of my game stopped showing up.
 

 

* MSPointer now has an `onPointerUpGlobal` handler for when the pointer is released outside of the canvas, but still within the browser window. This means that in IE11 a Sprites `onInputUp` event will now trigger even when outside the canvas (thanks @bvargish #2000)

[JRVisualsLLC]

Awesome.