Merge pull request #51 from yappbox/bug/click-capturing

PreventDefault on touch end event when scrolling

Author: lukemelia

addon/components/scroll-view.js

@@ -249,30 +249,21 @@ class ScrollView extends Component {
     this.scroller.doTouchMove(touches, timeStamp, scale)
   }
 
-  doTouchEnd(touches, timeStamp) {
-    if (this.needsCaptureClick()) {
-      this.setupCaptureClickTask.perform();
+  doTouchEnd(touches, timeStamp, event) {
+    let preventClick = this.needsPreventClick()
+
+    if (preventClick) {
+      event.preventDefault();
     }
+
     this.scroller.doTouchEnd(timeStamp);
-  }
 
-  @task
-  setupCaptureClickTask = function *() {
-    try {
-      let { scrollViewElement } = this;
-      let captureClick = (e) => {
-        e.stopPropagation(); // Stop the click from being propagated.
-        scrollViewElement.removeEventListener('click', captureClick, true); // cleanup
-      }
-      scrollViewElement.addEventListener('click', captureClick, true);
-      yield timeout(0);
-      scrollViewElement.removeEventListener('click', captureClick, true);
-    } finally {
+    if (preventClick) {
       this._decelerationVelocityY = null;
     }
   }
 
-  needsCaptureClick() {
+  needsPreventClick() {
     // There are two cases where we want to prevent the click that normally follows a mouseup/touchend.
     //
     // 1) when the user is just finishing a purposeful scroll (i.e. dragging scroll view beyond a threshold)

addon/utils/zynga-scroller-vertical-recognizer.js

@@ -47,7 +47,7 @@ export default class ZyngaScrollerVerticalRecognizer extends Hammer.Pan {
     if (inputData.isFirst) {
       this.options.scrollComponent.doTouchStart(inputData.pointers, inputData.timeStamp);
     } else if (inputData.isFinal) {
-      this.options.scrollComponent.doTouchEnd(inputData.pointers, inputData.timeStamp);
+      this.options.scrollComponent.doTouchEnd(inputData.pointers, inputData.timeStamp, inputData.srcEvent);
     } else {
       this.options.scrollComponent.doTouchMove(inputData.pointers, inputData.timeStamp, inputData.scale);
     }