Merge pull request #668 from bumbu/multielement

Add support for multitouch over separate child elements. Fixes #600
hammerjs · Sep 16, 2014 · 10a2909 · 10a2909
2 parents 2900458 + f4f6848
commit 10a2909
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 10 deletions.
diff --git a/src/input/touch.js b/src/input/touch.js
@@ -57,9 +57,15 @@ function getTouches(ev, type) {
     }
 
     var i,
-        targetTouches = toArray(ev.targetTouches),
+        targetTouches,
         changedTouches = toArray(ev.changedTouches),
-        changedTargetTouches = [];
+        changedTargetTouches = [],
+        target = this.target;
+
+    // get target touches from touches
+    targetTouches = allTouches.filter(function(touch) {
+        return hasParent(touch.target, target);
+    });
 
     // collect touches
     if (type === INPUT_START) {

diff --git a/tests/unit/assets/utils.js b/tests/unit/assets/utils.js
@@ -36,12 +36,15 @@ var utils = {
         el.dispatchEvent(event);
     },
 
-    createHitArea: function() {
+    createHitArea: function(parent) {
+        if (parent == null) {
+            parent = document.getElementById('qunit-fixture')
+        }
         var hitArea = document.createElement('div');
         hitArea.style.background = '#eee';
         hitArea.style.height = '300px';
 
-        document.getElementById('qunit-fixture').appendChild(hitArea);
+        parent.appendChild(hitArea);
         return hitArea;
     }
 };
diff --git a/tests/unit/test_gestures.js b/tests/unit/test_gestures.js
@@ -92,6 +92,41 @@ asyncTest('recognize pinch', function() {
     });
 });
 
+asyncTest('recognize children multitouch pinch', function() {
+    expect(1);
+
+    var el1 = utils.createHitArea(el),
+        el2 = utils.createHitArea(el);
+
+    Simulator.gestures.pinch([el1, el2], { duration: 500, scale: .5 }, function() {
+        start();
+        deepEqual(events, {
+            pinch: true,
+            pinchstart: true,
+            pinchmove: true,
+            pinchend: true,
+            pinchin: true
+        });
+    });
+});
+
+asyncTest('recognize parent-child multitouch pinch', function() {
+    expect(1);
+
+    var el1 = utils.createHitArea(el);
+
+    Simulator.gestures.pinch([el, el1], { duration: 100, scale: .5 }, function() {
+        start();
+        deepEqual(events, {
+            pinch: true,
+            pinchstart: true,
+            pinchmove: true,
+            pinchend: true,
+            pinchin: true
+        });
+    });
+});
+
 asyncTest('recognize rotate', function() {
     expect(1);
 
@@ -106,6 +141,22 @@ asyncTest('recognize rotate', function() {
     });
 });
 
+asyncTest('recognize multitouch rotate', function() {
+    expect(1);
+
+    var el1 = utils.createHitArea(el);
+
+    Simulator.gestures.rotate([el, el1], { duration: 500, scale: 1 }, function() {
+        start();
+        deepEqual(events, {
+            rotate: true,
+            rotatestart: true,
+            rotatemove: true,
+            rotateend: true
+        });
+    });
+});
+
 asyncTest('recognize rotate and pinch simultaneous', function() {
     expect(1);
 

diff --git a/tests/unit/test_simultaneous_recognition.js b/tests/unit/test_simultaneous_recognition.js
@@ -37,8 +37,8 @@ asyncTest('should pinch and pan simultaneously be recognized when enabled', func
         var event, touches;
 
         touches = [
-            {clientX: 0, clientY: 10, identifier: 0 },
-            {clientX: 10, clientY: 10, identifier: 1 }
+            {clientX: 0, clientY: 10, identifier: 0, target: el },
+            {clientX: 10, clientY: 10, identifier: 1, target: el }
         ];
 
         event = document.createEvent('Event');
@@ -50,8 +50,8 @@ asyncTest('should pinch and pan simultaneously be recognized when enabled', func
 
         setTimeout(function() {
             touches = [
-                {clientX: 10, clientY: 20, identifier: 0 },
-                {clientX: 20, clientY: 20, identifier: 1 }
+                {clientX: 10, clientY: 20, identifier: 0, target: el },
+                {clientX: 20, clientY: 20, identifier: 1, target: el }
             ];
 
             event = document.createEvent('Event');
@@ -65,8 +65,8 @@ asyncTest('should pinch and pan simultaneously be recognized when enabled', func
 
         setTimeout(function() {
             touches = [
-                {clientX: 20, clientY: 30, identifier: 0 },
-                {clientX: 40, clientY: 30, identifier: 1 }
+                {clientX: 20, clientY: 30, identifier: 0, target: el },
+                {clientX: 40, clientY: 30, identifier: 1, target: el }
             ];
 
             event = document.createEvent('Event');