Desktop Compatibility on Mouseout

[GoogleCodeExporter]

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)' : ')',

Original issue reported on code.google.com by thomas....@gmail.com on 22 Oct 2010 at 6:18

[GoogleCodeExporter]

Thanks for your tips, I'll consider your code for inclusion in the next revision

Original comment by mat...@gmail.com on 22 Oct 2010 at 6:27

• Changed state: Accepted