fix(tapclick): several improvements

- refactors code using UIEventManager
- improved performance by using passive event listeners
- fixes isScrolling()
- click tolerance has been increased to match native behavior
- click is immediately prevented if the content is scrolled.

Author: manucorporat

src/components/app/app.ts

@@ -22,6 +22,7 @@ export class App {
   private _title: string = '';
   private _titleSrv: Title = new Title();
   private _rootNav: NavController = null;
+  private _canDisableScroll: boolean;
 
   /**
    * @private
@@ -70,6 +71,7 @@ export class App {
     // listen for hardware back button events
     // register this back button action with a default priority
     _platform.registerBackButtonAction(this.navPop.bind(this));
+    this._canDisableScroll = this._config.get('canDisableScroll', true);
   }
 
   /**
@@ -122,7 +124,7 @@ export class App {
    * scrolling is enabled. When set to `true`, scrolling is disabled.
    */
   setScrollDisabled(disableScroll: boolean) {
-    if (this._config.get('canDisableScroll', true)) {
+    if (this._canDisableScroll) {
       this._appRoot._disableScroll(disableScroll);
     }
   }
@@ -148,7 +150,7 @@ export class App {
    * @return {boolean} returns true or false
    */
   isScrolling(): boolean {
-    return (this._scrollTime + 48 > Date.now());
+    return ((this._scrollTime + ACTIVE_SCROLLING_TIME) > Date.now());
   }
 
   /**
@@ -275,4 +277,5 @@ export class App {
 
 }
 
+const ACTIVE_SCROLLING_TIME = 100;
 const CLICK_BLOCK_BUFFER_IN_MILLIS = 64;

src/components/content/content.scss

@@ -52,8 +52,7 @@ ion-content.js-scroll > .scroll-content {
 }
 
 .disable-scroll .ion-page .scroll-content {
-  overflow-y: hidden;
-  overflow-x: hidden;
+  pointer-events: none;
 }
 
 

src/components/content/content.ts

@@ -190,7 +190,7 @@ export class Content extends Ion {
 
     this._zone.runOutsideAngular(() => {
       this._scroll = new ScrollView(this._scrollEle);
-      this._scLsn = this.addScrollListener(this._app.setScrolling);
+      this._scLsn = this.addScrollListener(this._app.setScrolling.bind(this._app));
     });
   }
 
@@ -252,6 +252,9 @@ export class Content extends Ion {
     return this._addListener('mousemove', handler);
   }
 
+  /**
+   * @private
+   */
   _addListener(type: string, handler: any): Function {
     assert(handler, 'handler must be valid');
     assert(this._scrollEle, '_scrollEle must be valid');

src/components/tap-click/activator.ts

@@ -21,7 +21,7 @@ export class Activator {
     // queue to have this element activated
     this._queue.push(activatableEle);
 
-    rafFrames(2, () => {
+    rafFrames(6, () => {
       let activatableEle: HTMLElement;
       for (let i = 0; i < this._queue.length; i++) {
         activatableEle = this._queue[i];
@@ -30,7 +30,7 @@ export class Activator {
           activatableEle.classList.add(this._css);
         }
       }
-      this._queue = [];
+      this._queue.length = 0;
     });
   }
 
@@ -59,7 +59,7 @@ export class Activator {
 
   deactivate() {
     // remove the active class from all active elements
-    this._queue = [];
+    this._queue.length = 0;
 
     rafFrames(2, () => {
       for (var i = 0; i < this._active.length; i++) {

src/components/tap-click/tap-click.ts

@@ -5,156 +5,89 @@ import { App } from '../app/app';
 import { Config } from '../../config/config';
 import { hasPointerMoved, pointerCoord } from '../../util/dom';
 import { RippleActivator } from './ripple';
-
+import { UIEventManager, PointerEvents, PointerEventType } from '../../util/ui-event-manager';
 
 /**
  * @private
  */
 @Injectable()
 export class TapClick {
-  private lastTouch: number = 0;
   private disableClick: number = 0;
-  private lastActivated: number = 0;
   private usePolyfill: boolean;
   private activator: Activator;
   private startCoord: any;
-  private pointerMove: any;
+  private events: UIEventManager = new UIEventManager(false);
+  private pointerEvents: PointerEvents;
 
   constructor(
     config: Config,
     private app: App,
     zone: NgZone
   ) {
-    if (config.get('activator') === 'ripple') {
+    let activator = config.get('activator');
+    if (activator === 'ripple') {
       this.activator = new RippleActivator(app, config);
 
-    } else if (config.get('activator') === 'highlight') {
+    } else if (activator === 'highlight') {
       this.activator = new Activator(app, config);
     }
 
     this.usePolyfill = (config.get('tapPolyfill') === true);
 
-    zone.runOutsideAngular(() => {
-      addListener('click', this.click.bind(this), true);
-
-      addListener('touchstart', this.touchStart.bind(this));
-      addListener('touchend', this.touchEnd.bind(this));
-      addListener('touchcancel', this.pointerCancel.bind(this));
-
-      addListener('mousedown', this.mouseDown.bind(this), true);
-      addListener('mouseup', this.mouseUp.bind(this), true);
+    this.events.listen(document, 'click', this.click.bind(this), true);
+    this.pointerEvents = this.events.pointerEvents({
+      element: <any>document,
+      pointerDown: this.pointerStart.bind(this),
+      pointerMove: this.pointerMove.bind(this),
+      pointerUp: this.pointerEnd.bind(this),
+      passive: true
     });
-
-    this.pointerMove = (ev: UIEvent) => {
-      if (!this.startCoord || hasPointerMoved(POINTER_MOVE_UNTIL_CANCEL, this.startCoord, pointerCoord(ev)) ) {
-        this.pointerCancel(ev);
-      }
-    };
-  }
-
-  touchStart(ev: UIEvent) {
-    this.lastTouch = Date.now();
-    this.pointerStart(ev);
+    this.pointerEvents.mouseWait = DISABLE_NATIVE_CLICK_AMOUNT;
   }
 
-  touchEnd(ev: UIEvent) {
-    this.lastTouch = Date.now();
-
-    if (this.usePolyfill && this.startCoord && this.app.isEnabled()) {
-      // only dispatch mouse click events from a touchend event
-      // when tapPolyfill config is true, and the startCoordand endCoord
-      // are not too far off from each other
-      let endCoord = pointerCoord(ev);
-
-      if (!hasPointerMoved(POINTER_TOLERANCE, this.startCoord, endCoord)) {
-        // prevent native mouse click events for XX amount of time
-        this.disableClick = this.lastTouch + DISABLE_NATIVE_CLICK_AMOUNT;
-
-        if (this.app.isScrolling()) {
-          // do not fire off a click event while the app was scrolling
-          console.debug('click from touch prevented by scrolling ' + Date.now());
-
-        } else {
-          // dispatch a mouse click event
-          console.debug('create click from touch ' + Date.now());
-
-          let clickEvent: any = document.createEvent('MouseEvents');
-          clickEvent.initMouseEvent('click', true, true, window, 1, 0, 0, endCoord.x, endCoord.y, false, false, false, false, 0, null);
-          clickEvent.isIonicTap = true;
-          ev.target.dispatchEvent(clickEvent);
-        }
-      }
+  pointerStart(ev: any): boolean {
+    if (this.startCoord) {
+      return false;
     }
-
-    this.pointerEnd(ev);
-  }
-
-  mouseDown(ev: any) {
-    if (this.isDisabledNativeClick()) {
-      console.debug('mouseDown prevent ' + ev.target.tagName + ' ' + Date.now());
-      // does not prevent default on purpose
-      // so native blur events from inputs can happen
-      ev.stopPropagation();
-
-    } else if (this.lastTouch + DISABLE_NATIVE_CLICK_AMOUNT < Date.now()) {
-      this.pointerStart(ev);
+    let activatableEle = getActivatableTarget(ev.target);
+    if (!activatableEle) {
+      this.startCoord = null;
+      return false;
     }
+    this.startCoord = pointerCoord(ev);
+    this.activator && this.activator.downAction(ev, activatableEle, this.startCoord);
+    return true;
   }
 
-  mouseUp(ev: any) {
-    if (this.isDisabledNativeClick()) {
-      console.debug('mouseUp prevent ' + ev.target.tagName + ' ' + Date.now());
-      ev.preventDefault();
-      ev.stopPropagation();
-    }
-
-    if (this.lastTouch + DISABLE_NATIVE_CLICK_AMOUNT < Date.now()) {
-      this.pointerEnd(ev);
+  pointerMove(ev: UIEvent) {
+    if (!this.startCoord ||
+      hasPointerMoved(POINTER_TOLERANCE, this.startCoord, pointerCoord(ev)) ||
+      this.app.isScrolling()) {
+      this.pointerCancel(ev);
     }
   }
 
-  pointerStart(ev: any) {
-    let activatableEle = getActivatableTarget(ev.target);
-
-    if (activatableEle) {
-      this.startCoord = pointerCoord(ev);
-
-      let now = Date.now();
-      if (this.lastActivated + 150 < now && !this.app.isScrolling()) {
-        this.activator && this.activator.downAction(ev, activatableEle, this.startCoord);
-        this.lastActivated = now;
-      }
-
-      this.moveListeners(true);
-
-    } else {
-      this.startCoord = null;
+  pointerEnd(ev: any, type: PointerEventType) {
+    if (!this.startCoord) {
+      return;
     }
-  }
-
-  pointerEnd(ev: any) {
-    if (this.startCoord && this.activator) {
+    if (type === PointerEventType.TOUCH && this.usePolyfill && this.app.isEnabled()) {
+      this.handleTapPolyfill(ev);
+    }
+    if (this.activator) {
       let activatableEle = getActivatableTarget(ev.target);
       if (activatableEle) {
         this.activator.upAction(ev, activatableEle, this.startCoord);
       }
     }
-
-    this.moveListeners(false);
+    this.startCoord = null;
   }
 
   pointerCancel(ev: UIEvent) {
     console.debug('pointerCancel from ' + ev.type + ' ' + Date.now());
+    this.startCoord = null;
     this.activator && this.activator.clearState();
-    this.moveListeners(false);
-  }
-
-  moveListeners(shouldAdd: boolean) {
-    removeListener(this.usePolyfill ? 'touchmove' : 'mousemove', this.pointerMove);
-
-    if (shouldAdd) {
-      addListener(this.usePolyfill ? 'touchmove' : 'mousemove', this.pointerMove);
-    }
+    this.pointerEvents.stop();
   }
 
   click(ev: any) {
@@ -174,6 +107,34 @@ export class TapClick {
     }
   }
 
+  handleTapPolyfill(ev: any) {
+    // only dispatch mouse click events from a touchend event
+    // when tapPolyfill config is true, and the startCoordand endCoord
+    // are not too far off from each other
+    let endCoord = pointerCoord(ev);
+
+    if (hasPointerMoved(POINTER_TOLERANCE, this.startCoord, endCoord)) {
+      console.debug('click from touch prevented by pointer moved');
+      return;
+    }
+    // prevent native mouse click events for XX amount of time
+    this.disableClick = Date.now() + DISABLE_NATIVE_CLICK_AMOUNT;
+
+    if (this.app.isScrolling()) {
+      // do not fire off a click event while the app was scrolling
+      console.debug('click from touch prevented by scrolling ' + Date.now());
+
+    } else {
+      // dispatch a mouse click event
+      console.debug('create click from touch ' + Date.now());
+
+      let clickEvent: any = document.createEvent('MouseEvents');
+      clickEvent.initMouseEvent('click', true, true, window, 1, 0, 0, endCoord.x, endCoord.y, false, false, false, false, 0, null);
+      clickEvent.isIonicTap = true;
+      ev.target.dispatchEvent(clickEvent);
+    }
+  }
+
   isDisabledNativeClick() {
     return this.disableClick > Date.now();
   }
@@ -194,33 +155,23 @@ function getActivatableTarget(ele: HTMLElement) {
 /**
  * @private
  */
-export const isActivatable = function(ele: HTMLElement) {
-  if (ACTIVATABLE_ELEMENTS.test(ele.tagName)) {
+export const isActivatable = function (ele: HTMLElement) {
+  if (ACTIVATABLE_ELEMENTS.indexOf(ele.tagName) > -1) {
     return true;
   }
 
   let attributes = ele.attributes;
   for (let i = 0, l = attributes.length; i < l; i++) {
-    if (ACTIVATABLE_ATTRIBUTES.test(attributes[i].name)) {
+    if (ACTIVATABLE_ATTRIBUTES.indexOf(attributes[i].name) > -1) {
       return true;
     }
   }
-
   return false;
 };
 
-function addListener(type: string, listener: any, useCapture?: boolean) {
-  document.addEventListener(type, listener, useCapture);
-}
-
-function removeListener(type: string, listener: any) {
-  document.removeEventListener(type, listener);
-}
-
-const ACTIVATABLE_ELEMENTS = /^(A|BUTTON)$/;
-const ACTIVATABLE_ATTRIBUTES = /tappable|button/i;
-const POINTER_TOLERANCE = 4;
-const POINTER_MOVE_UNTIL_CANCEL = 10;
+const ACTIVATABLE_ELEMENTS = ['A', 'BUTTON'];
+const ACTIVATABLE_ATTRIBUTES = ['tappable', 'button'];
+const POINTER_TOLERANCE = 60;
 const DISABLE_NATIVE_CLICK_AMOUNT = 2500;
 
 export function setupTapClick(config: Config, app: App, zone: NgZone) {

src/platform/platform-registry.ts

@@ -110,7 +110,7 @@ export const PLATFORM_CONFIGS: {[key: string]: PlatformConfig} = {
       swipeBackThreshold: 40,
       tapPolyfill: isIOSDevice,
       virtualScrollEventAssist: !(window.indexedDB),
-      canDisableScroll: !!(window.indexedDB),
+      canDisableScroll: isIOSDevice,
     },
     isMatch(p: Platform) {
       return p.isPlatformMatch('ios', ['iphone', 'ipad', 'ipod'], ['windows phone']);