Phaser.Mouse will now add a listener to the window to detect mouseup events. This is used to detect if the player releases the mouse while outside of the game canvas. Previously Pointer objects incorrectly thought they were still pressed when you returned the mouse over the canvas (phaserjs#1167)

Author: photonstorm

README.md

@@ -106,6 +106,7 @@ Version 2.1.0 - "Cairhien" - -in development-
 * ArcadePhysics.collide and overlap can now accept 2 Arrays of objects to be used in the collision checks (thanks @ctmartinez1992 #1158)
 * RetroFont has a new property called frameData which contains the Frame objects for each of the letters in the font, which can be used by Sprites.
 * Phaser.Canvas.setImageRenderingCrisp now sets `image-rendering: pixelated`, perfect for pixel art, which is now supported in Chrome 38.
+* Phaser.Mouse will now add a listener to the `window` to detect `mouseup` events. This is used to detect if the player releases the mouse while outside of the game canvas. Previously Pointer objects incorrectly thought they were still pressed when you returned the mouse over the canvas (#1167)
 
 ### Updates
 

src/input/Mouse.js

@@ -5,7 +5,9 @@
 */
 
 /**
-* Phaser.Mouse is responsible for handling all aspects of mouse interaction with the browser. It captures and processes mouse events.
+* Phaser.Mouse is responsible for handling all aspects of mouse interaction with the browser.
+* It captures and processes mouse events that happen on the game canvas object. It also adds a single `mouseup` listener to `window` which
+* is used to capture the mouse being released when not over the game.
 *
 * @class Phaser.Mouse
 * @constructor
@@ -207,6 +209,10 @@ Phaser.Mouse.prototype = {
             return _this.onMouseUp(event);
         };
 
+        this._onMouseUpGlobal = function (event) {
+            return _this.onMouseUpGlobal(event);
+        };
+
         this._onMouseOut = function (event) {
             return _this.onMouseOut(event);
         };
@@ -225,6 +231,7 @@ Phaser.Mouse.prototype = {
 
         if (!this.game.device.cocoonJS)
         {
+            window.addEventListener('mouseup', this._onMouseUpGlobal, true);
             this.game.canvas.addEventListener('mouseover', this._onMouseOver, true);
             this.game.canvas.addEventListener('mouseout', this._onMouseOut, true);
             this.game.canvas.addEventListener('mousewheel', this._onMouseWheel, true);
@@ -302,6 +309,8 @@ Phaser.Mouse.prototype = {
     */
     onMouseUp: function (event) {
 
+        console.log('onMouseUp', event);
+
         this.event = event;
 
         if (this.capture)
@@ -327,6 +336,30 @@ Phaser.Mouse.prototype = {
 
     },
 
+    /**
+    * The internal method that handles the mouse up event from the window.
+    * 
+    * @method Phaser.Mouse#onMouseUpGlobal
+    * @param {MouseEvent} event - The native event from the browser. This gets stored in Mouse.event.
+    */
+    onMouseUpGlobal: function (event) {
+
+        if (!this.game.input.mousePointer.withinGame)
+        {
+            this.button = Phaser.Mouse.NO_BUTTON;
+
+            if (this.mouseUpCallback)
+            {
+                this.mouseUpCallback.call(this.callbackContext, event);
+            }
+
+            event['identifier'] = 0;
+
+            this.game.input.mousePointer.stop(event);
+        }
+
+    },
+
     /**
     * The internal method that handles the mouse out event from the browser.
     *
@@ -342,6 +375,8 @@ Phaser.Mouse.prototype = {
             event.preventDefault();
         }
 
+        this.game.input.mousePointer.withinGame = false;
+
         if (this.mouseOutCallback)
         {
             this.mouseOutCallback.call(this.callbackContext, event);
@@ -352,8 +387,6 @@ Phaser.Mouse.prototype = {
             return;
         }
 
-        this.game.input.mousePointer.withinGame = false;
-
         if (this.stopOnGameOut)
         {
             event['identifier'] = 0;
@@ -403,6 +436,8 @@ Phaser.Mouse.prototype = {
             event.preventDefault();
         }
 
+        this.game.input.mousePointer.withinGame = true;
+
         if (this.mouseOverCallback)
         {
             this.mouseOverCallback.call(this.callbackContext, event);
@@ -413,8 +448,6 @@ Phaser.Mouse.prototype = {
             return;
         }
 
-        this.game.input.mousePointer.withinGame = true;
-
     },
 
     /**
@@ -500,6 +533,8 @@ Phaser.Mouse.prototype = {
         this.game.canvas.removeEventListener('mousewheel', this._onMouseWheel, true);
         this.game.canvas.removeEventListener('DOMMouseScroll', this._onMouseWheel, true);
 
+        window.removeEventListener('mouseup', this._onMouseUpGlobal, true);
+
         document.removeEventListener('pointerlockchange', this._pointerLockChange, true);
         document.removeEventListener('mozpointerlockchange', this._pointerLockChange, true);
         document.removeEventListener('webkitpointerlockchange', this._pointerLockChange, true);