Updated passive and capture states of the input handlers

Author: photonstorm

v3/src/boot/Config.js

@@ -46,6 +46,7 @@ var ValueToColor = require('../display/color/ValueToColor');
  * @property {object} [?input.mouse.target=null] - [description]
  * @property {boolean} [input.touch=true] - [description]
  * @property {object} [?input.touch.target=null] - [description]
+ * @property {object} [?input.touch.capture=true] - [description]
  * @property {boolean} [input.gamepad=false] - [description]
  * @property {boolean} [disableContextMenu=false] - [description]
  * @property {boolean} [banner=false] - [description]
@@ -124,9 +125,11 @@ var Config = new Class({
 
         this.inputMouse = GetValue(config, 'input.mouse', true);
         this.inputMouseEventTarget = GetValue(config, 'input.mouse.target', null);
+        this.inputMouseCapture = GetValue(config, 'input.mouse.capture', true);
 
         this.inputTouch = GetValue(config, 'input.touch', true);
         this.inputTouchEventTarget = GetValue(config, 'input.touch.target', null);
+        this.inputTouchCapture = GetValue(config, 'input.touch.capture', true);
 
         this.inputGamepad = GetValue(config, 'input.gamepad', false);
 

v3/src/input/mouse/MouseManager.js

@@ -14,7 +14,7 @@ var MouseManager = new Class({
         this.manager = inputManager;
 
         // @property {boolean} capture - If true the DOM mouse events will have event.preventDefault applied to them, if false they will propagate fully.
-        this.capture = false;
+        this.capture = true;
 
         this.enabled = false;
 
@@ -35,6 +35,7 @@ var MouseManager = new Class({
 
         this.enabled = config.inputMouse;
         this.target = config.inputMouseEventTarget;
+        this.capture = config.inputMouseCapture;
 
         if (!this.target)
         {
@@ -112,34 +113,56 @@ var MouseManager = new Class({
     startListeners: function ()
     {
         var queue = this.manager.queue;
+        var target = this.target;
 
-        var _this = this;
+        var passive = { passive: true };
+        var nonPassive = { passive: false };
 
-        var handler = function (event)
+        var handler;
+
+        if (this.capture)
         {
-            if (event.preventDefaulted)
+            handler = function (event)
             {
-                // Do nothing if event already handled
-                return;
-            }
+                if (event.preventDefaulted)
+                {
+                    // Do nothing if event already handled
+                    return;
+                }
 
-            queue.push(event);
+                queue.push(event);
 
-            if (_this.capture)
-            {
                 event.preventDefault();
-            }
-        };
+            };
 
-        this.handler = handler;
+            target.addEventListener('mousemove', handler, nonPassive);
+            target.addEventListener('mousedown', handler, nonPassive);
+            target.addEventListener('mouseup', handler, nonPassive);
+        }
+        else
+        {
+            handler = function (event)
+            {
+                if (event.preventDefaulted)
+                {
+                    // Do nothing if event already handled
+                    return;
+                }
+
+                queue.push(event);
+            };
+
+            target.addEventListener('mousemove', handler, passive);
+            target.addEventListener('mousedown', handler, passive);
+            target.addEventListener('mouseup', handler, passive);
+        }
 
-        this.target.addEventListener('mousemove', handler, false);
-        this.target.addEventListener('mousedown', handler, false);
-        this.target.addEventListener('mouseup', handler, false);
+        this.handler = handler;
 
         if (Features.pointerLock)
         {
             this.pointerLockChange = this.pointerLockChange.bind(this);
+
             document.addEventListener('pointerlockchange', this.pointerLockChange, true);
             document.addEventListener('mozpointerlockchange', this.pointerLockChange, true);
             document.addEventListener('webkitpointerlockchange', this.pointerLockChange, true);
@@ -148,9 +171,11 @@ var MouseManager = new Class({
 
     stopListeners: function ()
     {
-        this.target.removeEventListener('mousemove', this.handler);
-        this.target.removeEventListener('mousedown', this.handler);
-        this.target.removeEventListener('mouseup', this.handler);
+        var target = this.target;
+
+        target.removeEventListener('mousemove', this.handler);
+        target.removeEventListener('mousedown', this.handler);
+        target.removeEventListener('mouseup', this.handler);
 
         if (Features.pointerLock)
         {

v3/src/input/touch/TouchManager.js

@@ -13,7 +13,7 @@ var TouchManager = new Class({
         this.manager = inputManager;
 
         // @property {boolean} capture - If true the DOM events will have event.preventDefault applied to them, if false they will propagate fully.
-        this.capture = false;
+        this.capture = true;
 
         this.enabled = false;
 
@@ -28,6 +28,7 @@ var TouchManager = new Class({
 
         this.enabled = config.inputTouch;
         this.target = config.inputTouchEventTarget;
+        this.capture = config.inputTouchCapture;
 
         if (!this.target)
         {
@@ -43,39 +44,60 @@ var TouchManager = new Class({
     startListeners: function ()
     {
         var queue = this.manager.queue;
+        var target = this.target;
 
-        var _this = this;
+        var passive = { passive: true };
+        var nonPassive = { passive: false };
 
-        var handler = function (event)
+        var handler;
+
+        if (this.capture)
         {
-            if (event.preventDefaulted)
+            handler = function (event)
             {
-                // Do nothing if event already handled
-                return;
-            }
-
-            // console.log(event);
+                if (event.preventDefaulted)
+                {
+                    // Do nothing if event already handled
+                    return;
+                }
 
-            queue.push(event);
+                queue.push(event);
 
-            if (_this.capture)
-            {
                 event.preventDefault();
-            }
-        };
+            };
 
+            target.addEventListener('touchstart', handler, nonPassive);
+            target.addEventListener('touchmove', handler, nonPassive);
+            target.addEventListener('touchend', handler, nonPassive);
+        }
+        else
+        {
+            handler = function (event)
+            {
+                if (event.preventDefaulted)
+                {
+                    // Do nothing if event already handled
+                    return;
+                }
+
+                queue.push(event);
+            };
+
+            target.addEventListener('touchstart', handler, passive);
+            target.addEventListener('touchmove', handler, passive);
+            target.addEventListener('touchend', handler, passive);
+        }
+        
         this.handler = handler;
-
-        this.target.addEventListener('touchstart', handler, false);
-        this.target.addEventListener('touchmove', handler, false);
-        this.target.addEventListener('touchend', handler, false);
     },
 
     stopListeners: function ()
     {
-        this.target.removeEventListener('touchstart', this.handler);
-        this.target.removeEventListener('touchmove', this.handler);
-        this.target.removeEventListener('touchend', this.handler);
+        var target = this.target;
+
+        target.removeEventListener('touchstart', this.handler);
+        target.removeEventListener('touchmove', this.handler);
+        target.removeEventListener('touchend', this.handler);
     }
 
 });