My favorites | Sign in
Project Home Downloads Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 33: Desktop Compatibility on Mouseout
2 people starred this issue and may be notified of changes. Back to list
Status:  Accepted
Owner:  mat...@gmail.com


 
Reported by thomas....@gmail.com, Oct 21, 2010
What steps will reproduce the problem?
1. code iScroll with desktopCompa option
2. initiate scroll with mouse without releasing the button
3. move mouse away from browser window and release the button

What is the expected output? What do you see instead?
Scroll to stop following the mouse

What version of the product are you using? On what operating system?
3.7.1

Please provide any additional information below.

Although one might not desktopCompat in production, many of us develop on desktop everyday. So, the bug is high impact.

Below is a patch I developed. (I also added a CANCEL_EVENT).

============

+++ iscroll/src/iscroll.js       (working copy)
@@ -63,6 +63,11 @@
                that.element.addEventListener(START_EVENT, that, false);
                that.element.addEventListener(MOVE_EVENT, that, false);
                that.element.addEventListener(END_EVENT, that, false);
+               if (isTouch) {
+                 that.element.addEventListener(CANCEL_EVENT, that, false);
+               } else if (that.options.desktopCompatibility) {
+                 document.addEventListener('mouseup', that, false);
+               }
        }

        if (that.options.checkDOMChanges) {
@@ -86,6 +91,7 @@
                                that.touchMove(e);
                                break;
                        case END_EVENT:
+      case CANCEL_EVENT:
                                that.touchEnd(e);
                                break;
                        case 'webkitTransitionEnd':
@@ -375,7 +381,7 @@

                that.scrollTo(newPositionX, newPositionY, newDuration + 'ms');
        },
-
+
        transitionEnd: function () {
                var that = this;
                document.removeEventListener('webkitTransitionEnd', that, false);
@@ -565,6 +571,11 @@
                that.element.removeEventListener(START_EVENT, that, false);
                that.element.removeEventListener(MOVE_EVENT, that, false);
                that.element.removeEventListener(END_EVENT, that, false);
+    if (isTouch) {
+      that.element.addEventListener(CANCEL_EVENT, that, false);
+    } else if (that.options.desktopCompatibility) {
+      document.addEventListener(CANCEL_EVENT, that, false);
+    }
                document.removeEventListener('webkitTransitionEnd', that, false);

                if (that.options.checkDOMChanges) {
@@ -710,6 +721,7 @@
        START_EVENT = isTouch ? 'touchstart' : 'mousedown',
        MOVE_EVENT = isTouch ? 'touchmove' : 'mousemove',
        END_EVENT = isTouch ? 'touchend' : 'mouseup',
+       CANCEL_EVENT = isTouch ? 'touchcancel' : 'mouseup',
        // Translate3d helper
        translateOpen = 'translate' + (has3d ? '3d(' : '('),
        translateClose = has3d ? ',0)' : ')',


Oct 21, 2010
Project Member #1 mat...@gmail.com
Thanks for your tips, I'll consider your code for inclusion in the next revision
Status: Accepted
Owner: matt3o

Powered by Google Project Hosting