New preProcessEvent event

src/button.js

@@ -138,6 +138,13 @@ $.Button = function( options ) {
         this.imgDown.alt  =
             this.tooltip;
 
+        // Allow pointer events to pass through the img elements so implicit
+        //   pointer capture works on touch devices
+        $.setElementPointerEventsNone( this.imgRest );
+        $.setElementPointerEventsNone( this.imgGroup );
+        $.setElementPointerEventsNone( this.imgHover );
+        $.setElementPointerEventsNone( this.imgDown );
+
         this.element.style.position = "relative";
         $.setElementTouchActionNone( this.element );
 

src/drawer.js

@@ -126,6 +126,10 @@ $.Drawer = function( options ) {
     this.canvas.style.height    = "100%";
     this.canvas.style.position  = "absolute";
     $.setElementOpacity( this.canvas, this.opacity, true );
+    // Allow pointer events to pass through the canvas element so implicit
+    //   pointer capture works on touch devices
+    $.setElementPointerEventsNone( this.canvas );
+    $.setElementTouchActionNone( this.canvas );
 
     // explicit left-align
     this.container.style.textAlign = "left";

src/navigator.js

@@ -167,12 +167,16 @@ $.Navigator = function( options ){
         style.zIndex        = 999999999;
         style.cursor        = 'default';
     }( this.displayRegion.style, this.borderWidth ));
+    $.setElementPointerEventsNone( this.displayRegion );
+    $.setElementTouchActionNone( this.displayRegion );
 
     this.displayRegionContainer = $.makeNeutralElement("div");
     this.displayRegionContainer.id = this.element.id + '-displayregioncontainer';
     this.displayRegionContainer.className = "displayregioncontainer";
     this.displayRegionContainer.style.width = "100%";
     this.displayRegionContainer.style.height = "100%";
+    $.setElementPointerEventsNone( this.displayRegionContainer );
+    $.setElementTouchActionNone( this.displayRegionContainer );
 
     viewer.addControl(
         this.element,
@@ -222,12 +226,21 @@ $.Navigator = function( options ){
     this.innerTracker.destroy();
     this.innerTracker = new $.MouseTracker({
         userData:        'Navigator.innerTracker',
-        element:         this.element,
+        element:         this.element, //this.canvas,
         dragHandler:     $.delegate( this, onCanvasDrag ),
         clickHandler:    $.delegate( this, onCanvasClick ),
         releaseHandler:  $.delegate( this, onCanvasRelease ),
         scrollHandler:   $.delegate( this, onCanvasScroll )
     });
+    this.outerTracker.userData = 'Navigator.outerTracker';
+
+    // this.innerTracker is attached to this.element...we need to allow pointer
+    //   events to pass through this Viewer's canvas/container elements so implicit
+    //   pointer capture works on touch devices
+    //TODO an alternative is to attach the new MouseTracker to this.canvas...not
+    //   sure why it isn't already (see MouseTracker constructor call above)
+    $.setElementPointerEventsNone( this.canvas );
+    $.setElementPointerEventsNone( this.container );
 
     this.addHandler("reset-size", function() {
         if (_this.viewport) {

src/openseadragon.js

@@ -1949,6 +1949,19 @@ function OpenSeadragon( options ){
         },
 
 
+        /**
+         * Sets the specified element's pointer-events style attribute to 'none'.
+         * @function
+         * @param {Element|String} element
+         */
+        setElementPointerEventsNone: function( element ) {
+            element = $.getElement( element );
+            if ( typeof element.style.pointerEvents !== 'undefined' ) {
+                element.style.pointerEvents = 'none';
+            }
+        },
+
+
         /**
          * Add the specified CSS class to the element if not present.
          * @function

src/referencestrip.js

@@ -85,14 +85,7 @@ $.ReferenceStrip = function ( options ) {
         scroll:     $.DEFAULT_SETTINGS.referenceStripScroll,
         clickTimeThreshold:  $.DEFAULT_SETTINGS.clickTimeThreshold
     }, options, {
-        //required overrides
+        element:                this.element
-        element:                this.element,
-        //These need to be overridden to prevent recursion since
-        //the navigator is a viewer and a viewer has a navigator
-        showNavigator:          false,
-        mouseNavEnabled:        false,
-        showNavigationControl:  false,
-        showSequenceControl:    false
     } );
 
     $.extend( this, options );
@@ -119,9 +112,10 @@ $.ReferenceStrip = function ( options ) {
     $.setElementOpacity( this.element, 0.8 );
 
     this.viewer = viewer;
-    this.innerTracker = new $.MouseTracker( {
+    this.tracker = new $.MouseTracker( {
-        userData:       'ReferenceStrip.innerTracker',
+        userData:       'ReferenceStrip.tracker',
         element:        this.element,
+        clickHandler:   $.delegate( this, onStripClick ),
         dragHandler:    $.delegate( this, onStripDrag ),
         scrollHandler:  $.delegate( this, onStripScroll ),
         enterHandler:   $.delegate( this, onStripEnter ),
@@ -190,35 +184,12 @@ $.ReferenceStrip = function ( options ) {
         element.style.width         = _this.panelWidth + 'px';
         element.style.height        = _this.panelHeight + 'px';
         element.style.display       = 'inline';
-        element.style.float         = 'left'; //Webkit
+        element.style['float']      = 'left'; //Webkit
         element.style.cssFloat      = 'left'; //Firefox
         element.style.styleFloat    = 'left'; //IE
         element.style.padding       = '2px';
         $.setElementTouchActionNone( element );
-
+        $.setElementPointerEventsNone( element );
-        element.innerTracker = new $.MouseTracker( {
-            userData:           'ReferenceStrip.TileSource.innerTracker',
-            element:            element,
-            clickTimeThreshold: this.clickTimeThreshold,
-            clickDistThreshold: this.clickDistThreshold,
-            pressHandler: function ( event ) {
-                event.eventSource.dragging = $.now();
-            },
-            releaseHandler: function ( event ) {
-                var tracker = event.eventSource,
-                    id      = tracker.element.id,
-                    page    = Number( id.split( '-' )[2] ),
-                    now     = $.now();
-
-                if ( event.insideElementPressed &&
-                     event.insideElementReleased &&
-                     tracker.dragging &&
-                     ( now - tracker.dragging ) < tracker.clickTimeThreshold ) {
-                    tracker.dragging = null;
-                    viewer.goToPage( page );
-                }
-            }
-        } );
 
         this.element.appendChild( element );
 
@@ -232,7 +203,8 @@ $.ReferenceStrip = function ( options ) {
 
 };
 
-$.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototype, /** @lends OpenSeadragon.ReferenceStrip.prototype */{
+/** @lends OpenSeadragon.ReferenceStrip.prototype */
+$.ReferenceStrip.prototype = {
 
     /**
      * @function
@@ -279,7 +251,7 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
             }
 
             this.currentPage = page;
-            onStripEnter.call( this, { eventSource: this.innerTracker } );
+            onStripEnter.call( this, { eventSource: this.tracker } );
         }
     },
 
@@ -294,7 +266,6 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
         return false;
     },
 
-    // Overrides Viewer.destroy
     destroy: function() {
         if (this.miniViewers) {
           for (var key in this.miniViewers) {
@@ -302,14 +273,34 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
           }
         }
 
+        this.tracker.destroy();
+
         if (this.element) {
             this.element.parentNode.removeChild(this.element);
         }
     }
 
-} );
+};
 
 
+/**
+ * @private
+ * @inner
+ * @function
+ */
+function onStripClick( event ) {
+    if ( event.quick ) {
+        var page;
+
+        if ( 'horizontal' === this.scroll ) {
+            page = Math.floor(event.position.x / this.panelWidth);
+        } else {
+            page = Math.floor(event.position.y / this.panelHeight);
+        }
+
+        this.viewer.goToPage( page );
+    }
+}
 
 
 /**
@@ -319,13 +310,14 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
  */
 function onStripDrag( event ) {
 
-    var offsetLeft   = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
+    this.dragging = true;
+    if ( this.element ) {
+        var offsetLeft   = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
         offsetTop    = Number( this.element.style.marginTop.replace( 'px', '' ) ),
         scrollWidth  = Number( this.element.style.width.replace( 'px', '' ) ),
         scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
         viewerSize   = $.getElementSize( this.viewer.canvas );
-    this.dragging = true;
+
-    if ( this.element ) {
         if ( 'horizontal' === this.scroll ) {
             if ( -event.delta.x > 0 ) {
                 //forward
@@ -368,12 +360,13 @@ function onStripDrag( event ) {
  * @function
  */
 function onStripScroll( event ) {
-    var offsetLeft   = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
+    if ( this.element ) {
+        var offsetLeft   = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
         offsetTop    = Number( this.element.style.marginTop.replace( 'px', '' ) ),
         scrollWidth  = Number( this.element.style.width.replace( 'px', '' ) ),
         scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
         viewerSize   = $.getElementSize( this.viewer.canvas );
-    if ( this.element ) {
+
         if ( 'horizontal' === this.scroll ) {
             if ( event.scroll > 0 ) {
                 //forward
@@ -414,7 +407,6 @@ function loadPanels( strip, viewerSize, scroll ) {
         activePanelsStart,
         activePanelsEnd,
         miniViewer,
-        style,
         i,
         element;
     if ( 'horizontal' === strip.scroll ) {
@@ -456,35 +448,14 @@ function loadPanels( strip, viewerSize, scroll ) {
                 ajaxHeaders:            strip.viewer.ajaxHeaders,
                 useCanvas:              strip.useCanvas
             } );
-
+            // Allow pointer events to pass through miniViewer's canvas/container
-            miniViewer.displayRegion           = $.makeNeutralElement( "div" );
+            //   elements so implicit pointer capture works on touch devices
-            miniViewer.displayRegion.id        = element.id + '-displayregion';
+            $.setElementPointerEventsNone( miniViewer.canvas );
-            miniViewer.displayRegion.className = 'displayregion';
+            $.setElementPointerEventsNone( miniViewer.container );
-
+            // We'll use event delegation from the reference strip element instead of
-            style               = miniViewer.displayRegion.style;
+            //   handling events on every miniViewer
-            style.position      = 'relative';
+            miniViewer.innerTracker.setTracking( false );
-            style.top           = '0px';
+            miniViewer.outerTracker.setTracking( false );
-            style.left          = '0px';
-            style.fontSize      = '0px';
-            style.overflow      = 'hidden';
-            style.float         = 'left'; //Webkit
-            style.cssFloat      = 'left'; //Firefox
-            style.styleFloat    = 'left'; //IE
-            style.zIndex        = 999999999;
-            style.cursor        = 'default';
-            style.width         = ( strip.panelWidth - 4 ) + 'px';
-            style.height        = ( strip.panelHeight - 4 ) + 'px';
-
-            // TODO: What is this for? Future keyboard navigation support?
-            miniViewer.displayRegion.innerTracker = new $.MouseTracker( {
-                userData:     'ReferenceStrip.miniViewer.innerTracker',
-                element:       miniViewer.displayRegion,
-                startDisabled: true
-            } );
-
-            element.getElementsByTagName( 'div' )[0].appendChild(
-                miniViewer.displayRegion
-            );
 
             strip.miniViewers[element.id] = miniViewer;
 

src/viewer.js

@@ -267,6 +267,7 @@ $.Viewer = function( options ) {
         style.top       = "0px";
         style.textAlign = "left";  // needed to protect against
     }( this.container.style ));
+    $.setElementTouchActionNone( this.container );
 
     this.container.insertBefore( this.canvas, this.container.firstChild );
     this.element.appendChild( this.container );
@@ -405,6 +406,8 @@ $.Viewer = function( options ) {
 
     // Overlay container
     this.overlaysContainer    = $.makeNeutralElement( "div" );
+    $.setElementPointerEventsNone( this.overlaysContainer );
+    $.setElementTouchActionNone( this.overlaysContainer );
     this.canvas.appendChild( this.overlaysContainer );
 
     // Now that we have a drawer, see if it supports rotate. If not we need to remove the rotate buttons