Merge pull request #855 from patrickhlauke/fix-pan-swipe-touchaction

Fix erroneous `pan-x pan-y` use and handling
hammerjs · Oct 20, 2015 · 82dc623 · 82dc623
2 parents f20533d + 50264a7
commit 82dc623
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/src/recognizers/pan.js b/src/recognizers/pan.js
@@ -27,10 +27,10 @@ inherit(PanRecognizer, AttrRecognizer, {
         var direction = this.options.direction;
         var actions = [];
         if (direction & DIRECTION_HORIZONTAL) {
-            actions.push(TOUCH_ACTION_PAN_X);
+            actions.push(TOUCH_ACTION_PAN_Y);
         }
         if (direction & DIRECTION_VERTICAL) {
-            actions.push(TOUCH_ACTION_PAN_Y);
+            actions.push(TOUCH_ACTION_PAN_X);
         }
         return actions;
     },

diff --git a/src/touchaction.js b/src/touchaction.js
@@ -95,6 +95,11 @@ TouchAction.prototype = {
             }
         }
 
+        if (hasPanX && hasPanY) {
+            // `pan-x pan-y` means browser handles all scrolling/panning, do not prevent
+            return;
+        }
+
         if (hasNone ||
             (hasPanY && direction & DIRECTION_HORIZONTAL) ||
             (hasPanX && direction & DIRECTION_VERTICAL)) {
@@ -126,9 +131,12 @@ function cleanTouchActions(actions) {
     var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X);
     var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y);
 
-    // pan-x and pan-y can be combined
+    // if both pan-x and pan-y are set (different recognizers
+    // for different directions, e.g. horizontal pan but vertical swipe?)
+    // we need none (as otherwise with pan-x pan-y combined none of these
+    // recognizers will work, since the browser would handle all panning
     if (hasPanX && hasPanY) {
-        return TOUCH_ACTION_PAN_X + ' ' + TOUCH_ACTION_PAN_Y;
+        return TOUCH_ACTION_NONE;
     }
 
     // pan-x OR pan-y

diff --git a/tests/manual/touchaction.html b/tests/manual/touchaction.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
+    <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="assets/style.css">
     <title>Hammer.js</title>
 
@@ -47,15 +47,15 @@ <h2>touch-action: auto</h2>
         <div class="tester azure" id="auto"></div>
 
         <h2>touch-action: pan-y</h2>
-        <p>Should prevent scrolling on horizontal movement. This is set by default when creating an Hammer instance.</p>
+        <p>Should prevent scrolling on horizontal movement. This is set by default when creating a Hammer instance.</p>
         <div class="tester azure" id="pan-y"></div>
 
         <h2>touch-action: pan-x</h2>
         <p>Should prevent scrolling on vertical movement.</p>
         <div class="tester azure" id="pan-x"></div>
 
         <h2>touch-action: pan-x pan-y</h2>
-        <p>Should prevent scrolling on all movement.</p>
+        <p>Should <strong>not</strong> prevent any scrolling on any movement. Horizontal and vertical scrolling handled by the browser directly.</p>
         <div class="tester azure" id="pan-x-pan-y"></div>
 
         <h2>touch-action: none</h2>