Fixed issue #41: Scroll inside draggable elements contents doesn't work on iPad

jquery.ui.touch-punch.js

@@ -1,7 +1,7 @@
-/*!
+/*!
  * jQuery UI Touch Punch 0.2.3
  *
- * Copyright 2011–2014, Dave Furfero
+ * Copyright 2011-2014, Dave Furfero
  * Dual licensed under the MIT or GPL Version 2 licenses.
  *
  * Depends:
@@ -21,7 +21,11 @@
   var mouseProto = $.ui.mouse.prototype,
       _mouseInit = mouseProto._mouseInit,
       _mouseDestroy = mouseProto._mouseDestroy,
-      touchHandled;
+      _mouseDown = mouseProto._mouseDown,
+      _mouseMove = mouseProto._mouseMove,
+      touchEvent,
+      touchHandled,
+      touchStartDefaultPrevented;
 
   /**
    * Simulate a mouse event based on a corresponding touch event
@@ -35,7 +39,7 @@
       return;
     }
 
-    event.preventDefault();
+    touchEvent = event;
 
     var touch = event.originalEvent.changedTouches[0],
         simulatedEvent = document.createEvent('MouseEvents');
@@ -63,6 +67,17 @@
     event.target.dispatchEvent(simulatedEvent);
   }
 
+  /**
+   * Get the x,y position of a touch event
+   * @param {Object} event A touch event
+   */
+  function getTouchCoords (event) {
+    return {
+      x: event.originalEvent.changedTouches[0].pageX,
+      y: event.originalEvent.changedTouches[0].pageY
+    };
+  }
+
   /**
    * Handle the jQuery UI widget's touchstart events
    * @param {Object} event The widget element's touchstart event
@@ -79,8 +94,10 @@
     // Set the flag to prevent other widgets from inheriting the touch event
     touchHandled = true;
 
+    touchStartDefaultPrevented = false;
+
     // Track movement to determine if interaction was a click
-    self._touchMoved = false;
+    self._startPos = getTouchCoords(event);
 
     // Simulate the mouseover event
     simulateMouseEvent(event, 'mouseover');
@@ -103,9 +120,6 @@
       return;
     }
 
-    // Interaction was not a click
-    this._touchMoved = true;
-
     // Simulate the mousemove event
     simulateMouseEvent(event, 'mousemove');
   };
@@ -121,17 +135,21 @@
       return;
     }
 
-    // Simulate the mouseup event
-    simulateMouseEvent(event, 'mouseup');
+    if (touchStartDefaultPrevented) {
 
-    // Simulate the mouseout event
-    simulateMouseEvent(event, 'mouseout');
+      // Simulate the mouseup event
+      simulateMouseEvent(event, 'mouseup');
 
-    // If the touch interaction did not move, it should trigger a click
-    if (!this._touchMoved) {
+      // Simulate the mouseout event
+      simulateMouseEvent(event, 'mouseout');
 
-      // Simulate the click event
-      simulateMouseEvent(event, 'click');
+      // If the touch interaction did not move, it should trigger a click
+      var endPos = getTouchCoords(event);
+      if ((Math.abs(endPos.x - this._startPos.x) < 10) && (Math.abs(endPos.y - this._startPos.y) < 10)) {
+
+        // Simulate the click event
+        simulateMouseEvent(event, 'click');
+      }
     }
 
     // Unset the flag to allow other widgets to inherit the touch event
@@ -177,4 +195,37 @@
     _mouseDestroy.call(self);
   };
 
+  /**
+   * Hook the $.ui.mouse _mouseDown method so that we can call preventDefault
+   * on the original touch event if and only if the default handler called
+   * preventDefault on the simulated mouse event.
+   */
+  mouseProto._mouseDown = function (event) {
+
+    var self = this;
+
+    _mouseDown.call(self, event);
+
+    if (event.isDefaultPrevented() && touchEvent) {
+      touchEvent.preventDefault();
+      touchStartDefaultPrevented = true;
+    }
+  };
+
+  /**
+   * Hook the $.ui.mouse _mouseMove method so that we can call preventDefault
+   * on the original touch event if and only if the default handler called
+   * preventDefault on the simulated mouse event.
+   */
+  mouseProto._mouseMove = function (event) {
+
+    var self = this;
+
+    _mouseMove.call(self, event);
+
+    if (event.isDefaultPrevented() && touchEvent) {
+      touchEvent.preventDefault();
+    }
+  };
+
 })(jQuery);