Added preventDefault option to MouseTracker handlers: scrollHandler, keyDownHandler, keyUpHandler, keyHandler

changelog.txt

@@ -40,6 +40,7 @@ OPENSEADRAGON CHANGELOG
 * Fixed preventDefaultAction functionality in viewer events (#1953 @msalsbery)
 * Added setImageFormatsSupported function (#1954 @pandaxtc)
 * Added dragToPan to the GestureSettings class, implemented in Viewer (#1956 @msalsbery)
+* Added preventDefault option to MouseTracker handlers: scrollHandler, keyDownHandler, keyUpHandler, keyHandler (# @msalsbery)
 
 2.4.2:
 

src/button.js

@@ -360,9 +360,11 @@ $.Button = function( options ) {
                  * @property {?Object} userData - Arbitrary subscriber-defined object.
                  */
                 _this.raiseEvent( "release", { originalEvent: event.originalEvent } );
-                return false;
+
+                event.preventDefault = true;
+            } else{
+                event.preventDefault = false;
             }
-            return true;
         }
 
     });

src/mousetracker.js

@@ -707,6 +707,8 @@
          *      True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead. Touch devices no longer generate scroll event.</span>
          * @param {Object} event.originalEvent
          *      The original event object.
+         * @param {Boolean} event.preventDefault
+         *      Set to true to prevent the default user-agent's handling of the wheel event.
          * @param {Object} event.userData
          *      Arbitrary user-defined object.
          */
@@ -885,6 +887,8 @@
          *      True if the meta key was pressed during this event.
          * @param {Object} event.originalEvent
          *      The original event object.
+         * @param {Boolean} event.preventDefault
+         *      Set to true to prevent the default user-agent's handling of the keydown event.
          * @param {Object} event.userData
          *      Arbitrary user-defined object.
          */
@@ -909,6 +913,8 @@
          *      True if the meta key was pressed during this event.
          * @param {Object} event.originalEvent
          *      The original event object.
+         * @param {Boolean} event.preventDefault
+         *      Set to true to prevent the default user-agent's handling of the keyup event.
          * @param {Object} event.userData
          *      Arbitrary user-defined object.
          */
@@ -933,6 +939,8 @@
          *      True if the meta key was pressed during this event.
          * @param {Object} event.originalEvent
          *      The original event object.
+         * @param {Boolean} event.preventDefault
+         *      Set to true to prevent the default user-agent's handling of the keypress event.
          * @param {Object} event.userData
          *      Arbitrary user-defined object.
          */
@@ -1772,6 +1780,8 @@
      */
     function onKeyDown( tracker, event ) {
         //$.console.log( "keydown %s %s %s %s %s", event.keyCode, event.charCode, event.ctrlKey, event.shiftKey, event.altKey );
+        var eventArgs = null;
+
         var eventInfo = {
             originalEvent: event,
             eventType: 'keydown',
@@ -1781,8 +1791,7 @@
         preProcessEvent( tracker, eventInfo );
 
         if ( tracker.keyDownHandler && !eventInfo.preventGesture && !eventInfo.defaultPrevented ) {
-            tracker.keyDownHandler(
+            eventArgs = {
-                {
                 eventSource:          tracker,
                 keyCode:              event.keyCode ? event.keyCode : event.charCode,
                 ctrl:                 event.ctrlKey,
@@ -1790,12 +1799,14 @@
                 alt:                  event.altKey,
                 meta:                 event.metaKey,
                 originalEvent:        event,
+                preventDefault:       eventInfo.preventDefault || eventInfo.defaultPrevented,
                 userData:             tracker.userData
-                }
+            };
-            );
+
+            tracker.keyDownHandler( eventArgs );
         }
 
-        if ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) {
+        if ( ( eventArgs && eventArgs.preventDefault ) || ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) ) {
                 $.cancelEvent( event );
         }
         if ( eventInfo.stopPropagation ) {
@@ -1811,6 +1822,8 @@
     function onKeyUp( tracker, event ) {
         //$.console.log( "keyup %s %s %s %s %s", event.keyCode, event.charCode, event.ctrlKey, event.shiftKey, event.altKey );
 
+        var eventArgs = null;
+
         var eventInfo = {
             originalEvent: event,
             eventType: 'keyup',
@@ -1820,8 +1833,7 @@
         preProcessEvent( tracker, eventInfo );
 
         if ( tracker.keyUpHandler && !eventInfo.preventGesture && !eventInfo.defaultPrevented ) {
-            tracker.keyUpHandler(
+            eventArgs = {
-                {
                 eventSource:          tracker,
                 keyCode:              event.keyCode ? event.keyCode : event.charCode,
                 ctrl:                 event.ctrlKey,
@@ -1829,12 +1841,14 @@
                 alt:                  event.altKey,
                 meta:                 event.metaKey,
                 originalEvent:        event,
+                preventDefault:       eventInfo.preventDefault || eventInfo.defaultPrevented,
                 userData:             tracker.userData
-                }
+            };
-            );
+
+            tracker.keyUpHandler( eventArgs );
         }
 
-        if ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) {
+        if ( ( eventArgs && eventArgs.preventDefault ) || ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) ) {
             $.cancelEvent( event );
         }
         if ( eventInfo.stopPropagation ) {
@@ -1850,6 +1864,8 @@
     function onKeyPress( tracker, event ) {
         //$.console.log( "keypress %s %s %s %s %s", event.keyCode, event.charCode, event.ctrlKey, event.shiftKey, event.altKey );
 
+        var eventArgs = null;
+
         var eventInfo = {
             originalEvent: event,
             eventType: 'keypress',
@@ -1859,8 +1875,7 @@
         preProcessEvent( tracker, eventInfo );
 
         if ( tracker.keyHandler && !eventInfo.preventGesture && !eventInfo.defaultPrevented ) {
-            tracker.keyHandler(
+            eventArgs = {
-                {
                 eventSource:          tracker,
                 keyCode:              event.keyCode ? event.keyCode : event.charCode,
                 ctrl:                 event.ctrlKey,
@@ -1868,12 +1883,14 @@
                 alt:                  event.altKey,
                 meta:                 event.metaKey,
                 originalEvent:        event,
+                preventDefault:       eventInfo.preventDefault || eventInfo.defaultPrevented,
                 userData:             tracker.userData
-                }
+            };
-            );
+
+            tracker.keyHandler( eventArgs );
         }
 
-        if ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) {
+        if ( ( eventArgs && eventArgs.preventDefault ) || ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) ) {
             $.cancelEvent( event );
         }
         if ( eventInfo.stopPropagation ) {
@@ -2035,6 +2052,8 @@
         var nDelta = 0,
             eventInfo;
 
+        var eventArgs = null;
+
         // The nDelta variable is gated to provide smooth z-index scrolling
         //   since the mouse wheel allows for substantial deltas meant for rapid
         //   y-index scrolling.
@@ -2051,10 +2070,7 @@
         preProcessEvent( tracker, eventInfo );
 
         if ( tracker.scrollHandler && !eventInfo.preventGesture && !eventInfo.defaultPrevented ) {
-            eventInfo.preventDefault = true;
+            eventArgs = {
-
-            tracker.scrollHandler(
-                {
                 eventSource:          tracker,
                 pointerType:          'mouse',
                 position:             getMouseRelative( event, tracker.element ),
@@ -2062,15 +2078,19 @@
                 shift:                event.shiftKey,
                 isTouchEvent:         false,
                 originalEvent:        originalEvent,
+                preventDefault:       eventInfo.preventDefault || eventInfo.defaultPrevented,
                 userData:             tracker.userData
-                }
+            };
-            );
+
+
+            tracker.scrollHandler( eventArgs );
         }
 
         if ( eventInfo.stopPropagation ) {
             $.stopEvent( originalEvent );
         }
-        if ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) {
+        //if ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) {
+        if ( ( eventArgs && eventArgs.preventDefault ) || ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) ) {
                 $.cancelEvent( originalEvent );
         }
 }
@@ -2811,9 +2831,12 @@
             case 'pointerover':
             case 'pointerout':
             case 'contextmenu':
+            case 'keydown':
+            case 'keyup':
+            case 'keypress':
                 eventInfo.isStopable = true;
                 eventInfo.isCancelable = true;
-                eventInfo.preventDefault = false;
+                eventInfo.preventDefault = false; // onContextMenu(), onKeyDown(), onKeyUp(), onKeyPress() may set true
                 eventInfo.preventGesture = false;
                 eventInfo.stopPropagation = false;
                 break;
@@ -2834,7 +2857,7 @@
             case 'wheel':
                 eventInfo.isStopable = true;
                 eventInfo.isCancelable = true;
-                eventInfo.preventDefault = false; // handleWheelEvent() may set true (tracker.hasScrollHandler)
+                eventInfo.preventDefault = false; // handleWheelEvent() may set true
                 eventInfo.preventGesture = !tracker.hasScrollHandler;
                 eventInfo.stopPropagation = false;
                 break;
@@ -2861,27 +2884,6 @@
                 eventInfo.preventGesture = false;
                 eventInfo.stopPropagation = false;
                 break;
-            case 'keydown':
-                eventInfo.isStopable = true;
-                eventInfo.isCancelable = true;
-                eventInfo.preventDefault = !!tracker.keyDownHandler;
-                eventInfo.preventGesture = false;
-                eventInfo.stopPropagation = false;
-                break;
-            case 'keyup':
-                eventInfo.isStopable = true;
-                eventInfo.isCancelable = true;
-                eventInfo.preventDefault = !!tracker.keyUpHandler;
-                eventInfo.preventGesture = false;
-                eventInfo.stopPropagation = false;
-                break;
-            case 'keypress':
-                eventInfo.isStopable = true;
-                eventInfo.isCancelable = true;
-                eventInfo.preventDefault = !!tracker.keyHandler;
-                eventInfo.preventGesture = false;
-                eventInfo.stopPropagation = false;
-                break;
             case 'focus':
             case 'blur':
             case 'pointerenter':

src/navigator.js

@@ -593,6 +593,15 @@ function onCanvasRelease( event ) {
  * @function
  */
 function onCanvasScroll( event ) {
+    var eventArgs = {
+        tracker: event.eventSource,
+        position: event.position,
+        scroll: event.scroll,
+        shift: event.shift,
+        originalEvent: event.originalEvent,
+        preventDefault: event.preventDefault
+    };
+
     /**
      * Raised when a scroll event occurs on the {@link OpenSeadragon.Viewer#navigator} element (mouse wheel, touch pinch, etc.).
      *
@@ -605,15 +614,12 @@ function onCanvasScroll( event ) {
      * @property {Number} scroll - The scroll delta for the event.
      * @property {Boolean} shift - True if the shift key was pressed during this event.
      * @property {Object} originalEvent - The original DOM event.
+     * @property {Boolean} preventDefault - Set to true to prevent the default user-agent's handling of the wheel event.
      * @property {?Object} userData - Arbitrary subscriber-defined object.
      */
-    this.viewer.raiseEvent( 'navigator-scroll', {
+    this.viewer.raiseEvent( 'navigator-scroll', eventArgs );
-        tracker: event.eventSource,
+
-        position: event.position,
+    event.preventDefault = eventArgs.preventDefault;
-        scroll: event.scroll,
-        shift: event.shift,
-        originalEvent: event.originalEvent
-    });
 }
 
 /**

src/referencestrip.js

@@ -400,6 +400,8 @@ function onStripScroll( event ) {
                 }
             }
         }
+
+        event.preventDefault = true;
     }
 }
 
@@ -528,22 +530,27 @@ function onKeyDown( event ) {
         switch ( event.keyCode ) {
             case 38: //up arrow
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
-                return false;
+                event.preventDefault = true;
+                break;
             case 40: //down arrow
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
-                return false;
+                event.preventDefault = true;
+                break;
             case 37: //left arrow
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
-                return false;
+                event.preventDefault = true;
+                break;
             case 39: //right arrow
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
-                return false;
+                event.preventDefault = true;
+                break;
             default:
                 //console.log( 'navigator keycode %s', event.keyCode );
-                return true;
+                event.preventDefault = false;
+                break;
         }
     } else {
-        return true;
+        event.preventDefault = false;
     }
 }
 
@@ -560,31 +567,38 @@ function onKeyPress( event ) {
         switch ( event.keyCode ) {
             case 61: //=|+
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
-                return false;
+                event.preventDefault = true;
+                break;
             case 45: //-|_
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
-                return false;
+                event.preventDefault = true;
+                break;
             case 48: //0|)
             case 119: //w
             case 87: //W
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
-                return false;
+                event.preventDefault = true;
+                break;
             case 115: //s
             case 83: //S
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
-                return false;
+                event.preventDefault = true;
+                break;
             case 97: //a
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
-                return false;
+                event.preventDefault = true;
+                break;
             case 100: //d
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
-                return false;
+                event.preventDefault = true;
+                break;
             default:
                 //console.log( 'navigator keycode %s', event.keyCode );
-                return true;
+                event.preventDefault = false;
+                break;
         }
     } else {
-        return true;
+        event.preventDefault = false;
     }
 }
 

src/viewer.js

@@ -2606,6 +2606,7 @@ function onCanvasKeyDown( event ) {
                   }
                   this.viewport.applyConstraints();
                 }
+                event.preventDefault = true;
                 break;
             case 40://down arrow
                 if (!canvasKeyDownEventArgs.preventVerticalPan) {
@@ -2616,23 +2617,29 @@ function onCanvasKeyDown( event ) {
                   }
                   this.viewport.applyConstraints();
                 }
+                event.preventDefault = true;
                 break;
             case 37://left arrow
                 if (!canvasKeyDownEventArgs.preventHorizontalPan) {
                   this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-this.pixelsPerArrowPress, 0)));
                   this.viewport.applyConstraints();
                 }
+                event.preventDefault = true;
                 break;
             case 39://right arrow
                 if (!canvasKeyDownEventArgs.preventHorizontalPan) {
                   this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(this.pixelsPerArrowPress, 0)));
                   this.viewport.applyConstraints();
                 }
+                event.preventDefault = true;
                 break;
             default:
                 //console.log( 'navigator keycode %s', event.keyCode );
+                event.preventDefault = false;
                 break;
         }
+    } else {
+        event.preventDefault = false;
     }
 }
 function onCanvasKeyPress( event ) {
@@ -2652,14 +2659,17 @@ function onCanvasKeyPress( event ) {
             case 61://=|+
                 this.viewport.zoomBy(1.1);
                 this.viewport.applyConstraints();
+                event.preventDefault = true;
                 break;
             case 45://-|_
                 this.viewport.zoomBy(0.9);
                 this.viewport.applyConstraints();
+                event.preventDefault = true;
                 break;
             case 48://0|)
                 this.viewport.goHome();
                 this.viewport.applyConstraints();
+                event.preventDefault = true;
                 break;
             case 119://w
             case 87://W
@@ -2671,6 +2681,7 @@ function onCanvasKeyPress( event ) {
                     }
                     this.viewport.applyConstraints();
                   }
+                  event.preventDefault = true;
                   break;
             case 115://s
             case 83://S
@@ -2682,18 +2693,21 @@ function onCanvasKeyPress( event ) {
                   }
                   this.viewport.applyConstraints();
                 }
+                event.preventDefault = true;
                 break;
             case 97://a
                 if (!canvasKeyPressEventArgs.preventHorizontalPan) {
                   this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-40, 0)));
                   this.viewport.applyConstraints();
                 }
+                event.preventDefault = true;
                 break;
             case 100://d
                 if (!canvasKeyPressEventArgs.preventHorizontalPan) {
                   this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(40, 0)));
                   this.viewport.applyConstraints();
                 }
+                event.preventDefault = true;
                 break;
             case 114: //r - clockwise rotation
               if(this.viewport.flipped){
@@ -2702,6 +2716,7 @@ function onCanvasKeyPress( event ) {
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
               }
               this.viewport.applyConstraints();
+              event.preventDefault = true;
               break;
             case 82: //R - counterclockwise  rotation
               if(this.viewport.flipped){
@@ -2710,14 +2725,19 @@ function onCanvasKeyPress( event ) {
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
               }
               this.viewport.applyConstraints();
+              event.preventDefault = true;
               break;
             case 102: //f
               this.viewport.toggleFlip();
+              event.preventDefault = true;
               break;
             default:
                 // console.log( 'navigator keycode %s', event.keyCode );
+                event.preventDefault = false;
                 break;
         }
+    } else {
+        event.preventDefault = false;
     }
 }
 
@@ -3240,6 +3260,8 @@ function onCanvasScroll( event ) {
             }
         }
     }
+
+    event.preventDefault = true;
 }
 
 function onContainerEnter( event ) {