new tap event. touchmove no longer incorrectly fires onmousemove event. dbltap now correctly bubbles. cleaned up some other event handling logic.

dist/kinetic-core.js

@@ -3,7 +3,7 @@
  * http://www.kineticjs.com/
  * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: May 29 2012
+ * Date: Jun 01 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -1886,29 +1886,35 @@ Kinetic.Stage.prototype = {
             }
 
             // handle touchstart
-            else if(this.touchStart) {
+            if(!isDragging && this.touchStart) {
                 this.touchStart = false;
+                this.tapStart = true;
                 shape._handleEvents('touchstart', evt);
-
-                if(el.ondbltap && shape.inDoubleClickWindow) {
-                    var events = el.ondbltap;
-                    for(var i = 0; i < events.length; i++) {
-                        events[i].handler.apply(shape, [evt]);
-                    }
-                }
-
-                shape.inDoubleClickWindow = true;
-
-                setTimeout(function() {
-                    shape.inDoubleClickWindow = false;
-                }, this.dblClickWindow);
                 return true;
             }
-
+            // handle touchend & tap
-            // handle touchend
             else if(this.touchEnd) {
                 this.touchEnd = false;
                 shape._handleEvents('touchend', evt);
+
+                // detect if tap or double tap occurred
+                if(this.tapStart) {
+                    /*
+                     * if dragging and dropping, don't fire tap or dbltap
+                     * event
+                     */
+                    if((!go.drag.moving) || !go.drag.node) {
+                        shape._handleEvents('ontap', evt);
+
+                        if(shape.inDoubleClickWindow) {
+                            shape._handleEvents('ondbltap', evt);
+                        }
+                        shape.inDoubleClickWindow = true;
+                        setTimeout(function() {
+                            shape.inDoubleClickWindow = false;
+                        }, this.dblClickWindow);
+                    }
+                }
                 return true;
             }
 
@@ -1936,11 +1942,16 @@ Kinetic.Stage.prototype = {
             }
 
             // handle mousemove and touchmove
-            else if(!isDragging) {
+            else if(!isDragging && this.mouseMove) {
                 shape._handleEvents('onmousemove', evt);
+                return true;
+            }
+            
+			else if(!isDragging && this.touchMove) {
                 shape._handleEvents('touchmove', evt);
                 return true;
             }
+
         }
         // handle mouseout condition
         else if(!isDragging && this.targetShape && this.targetShape._id === shape._id) {
@@ -2060,6 +2071,8 @@ Kinetic.Stage.prototype = {
         // desktop events
         this.content.addEventListener('mousedown', function(evt) {
             that.mouseDown = true;
+            that.mouseUp = false;
+            that.mouseMove = false;
 
             /*
              * init stage drag and drop
@@ -2082,15 +2095,17 @@ Kinetic.Stage.prototype = {
             var tt = 1000 / throttle;
 
             if(timeDiff >= tt) {
-                that.mouseUp = false;
                 that.mouseDown = false;
+                that.mouseUp = false;
+                that.mouseMove = true;
                 that._handleStageEvent(evt);
             }
         }, false);
 
         this.content.addEventListener('mouseup', function(evt) {
-            that.mouseUp = true;
             that.mouseDown = false;
+            that.mouseUp = true;
+            that.mouseMove = false;
             that._handleStageEvent(evt);
             that.clickStart = false;
         }, false);
@@ -2112,6 +2127,8 @@ Kinetic.Stage.prototype = {
         this.content.addEventListener('touchstart', function(evt) {
             evt.preventDefault();
             that.touchStart = true;
+            that.touchEnd = false;
+            that.touchMove = false;
 
             /*
              * init stage drag and drop
@@ -2135,14 +2152,19 @@ Kinetic.Stage.prototype = {
 
             if(timeDiff >= tt) {
                 evt.preventDefault();
+                that.touchStart = false;
+                that.touchEnd = false;
+                that.touchMove = true;
                 that._handleStageEvent(evt);
             }
         }, false);
 
         this.content.addEventListener('touchend', function(evt) {
-            evt.preventDefault();
+            that.touchStart = false;
             that.touchEnd = true;
+            that.touchMove = false;
             that._handleStageEvent(evt);
+            that.tapStart = false;
         }, false);
     },
     /**
@@ -2389,7 +2411,6 @@ Kinetic.Stage.prototype = {
      * set defaults
      */
     _setStageDefaultProperties: function() {
-        this.clickStart = false;
         this.targetShape = undefined;
         this.targetFound = false;
         this.mouseoverShape = undefined;
@@ -2399,11 +2420,15 @@ Kinetic.Stage.prototype = {
         this.mousePos = undefined;
         this.mouseDown = false;
         this.mouseUp = false;
+        this.mouseMove = false;
+        this.clickStart = false;
 
         // mobile flags
         this.touchPos = undefined;
         this.touchStart = false;
         this.touchEnd = false;
+        this.touchMove = false;
+        this.tapStart = false;
 
         this.ids = {};
         this.names = {};

src/Stage.js

@@ -432,29 +432,35 @@ Kinetic.Stage.prototype = {
             }
 
             // handle touchstart
-            else if(this.touchStart) {
+            if(!isDragging && this.touchStart) {
                 this.touchStart = false;
+                this.tapStart = true;
                 shape._handleEvents('touchstart', evt);
-
-                if(el.ondbltap && shape.inDoubleClickWindow) {
-                    var events = el.ondbltap;
-                    for(var i = 0; i < events.length; i++) {
-                        events[i].handler.apply(shape, [evt]);
-                    }
-                }
-
-                shape.inDoubleClickWindow = true;
-
-                setTimeout(function() {
-                    shape.inDoubleClickWindow = false;
-                }, this.dblClickWindow);
                 return true;
             }
-
+            // handle touchend & tap
-            // handle touchend
             else if(this.touchEnd) {
                 this.touchEnd = false;
                 shape._handleEvents('touchend', evt);
+
+                // detect if tap or double tap occurred
+                if(this.tapStart) {
+                    /*
+                     * if dragging and dropping, don't fire tap or dbltap
+                     * event
+                     */
+                    if((!go.drag.moving) || !go.drag.node) {
+                        shape._handleEvents('ontap', evt);
+
+                        if(shape.inDoubleClickWindow) {
+                            shape._handleEvents('ondbltap', evt);
+                        }
+                        shape.inDoubleClickWindow = true;
+                        setTimeout(function() {
+                            shape.inDoubleClickWindow = false;
+                        }, this.dblClickWindow);
+                    }
+                }
                 return true;
             }
 
@@ -482,11 +488,16 @@ Kinetic.Stage.prototype = {
             }
 
             // handle mousemove and touchmove
-            else if(!isDragging) {
+            else if(!isDragging && this.mouseMove) {
                 shape._handleEvents('onmousemove', evt);
+                return true;
+            }
+            
+			else if(!isDragging && this.touchMove) {
                 shape._handleEvents('touchmove', evt);
                 return true;
             }
+
         }
         // handle mouseout condition
         else if(!isDragging && this.targetShape && this.targetShape._id === shape._id) {
@@ -606,6 +617,8 @@ Kinetic.Stage.prototype = {
         // desktop events
         this.content.addEventListener('mousedown', function(evt) {
             that.mouseDown = true;
+            that.mouseUp = false;
+            that.mouseMove = false;
 
             /*
              * init stage drag and drop
@@ -628,15 +641,17 @@ Kinetic.Stage.prototype = {
             var tt = 1000 / throttle;
 
             if(timeDiff >= tt) {
-                that.mouseUp = false;
                 that.mouseDown = false;
+                that.mouseUp = false;
+                that.mouseMove = true;
                 that._handleStageEvent(evt);
             }
         }, false);
 
         this.content.addEventListener('mouseup', function(evt) {
-            that.mouseUp = true;
             that.mouseDown = false;
+            that.mouseUp = true;
+            that.mouseMove = false;
             that._handleStageEvent(evt);
             that.clickStart = false;
         }, false);
@@ -658,6 +673,8 @@ Kinetic.Stage.prototype = {
         this.content.addEventListener('touchstart', function(evt) {
             evt.preventDefault();
             that.touchStart = true;
+            that.touchEnd = false;
+            that.touchMove = false;
 
             /*
              * init stage drag and drop
@@ -681,14 +698,19 @@ Kinetic.Stage.prototype = {
 
             if(timeDiff >= tt) {
                 evt.preventDefault();
+                that.touchStart = false;
+                that.touchEnd = false;
+                that.touchMove = true;
                 that._handleStageEvent(evt);
             }
         }, false);
 
         this.content.addEventListener('touchend', function(evt) {
-            evt.preventDefault();
+            that.touchStart = false;
             that.touchEnd = true;
+            that.touchMove = false;
             that._handleStageEvent(evt);
+            that.tapStart = false;
         }, false);
     },
     /**
@@ -935,7 +957,6 @@ Kinetic.Stage.prototype = {
      * set defaults
      */
     _setStageDefaultProperties: function() {
-        this.clickStart = false;
         this.targetShape = undefined;
         this.targetFound = false;
         this.mouseoverShape = undefined;
@@ -945,11 +966,15 @@ Kinetic.Stage.prototype = {
         this.mousePos = undefined;
         this.mouseDown = false;
         this.mouseUp = false;
+        this.mouseMove = false;
+        this.clickStart = false;
 
         // mobile flags
         this.touchPos = undefined;
         this.touchStart = false;
         this.touchEnd = false;
+        this.touchMove = false;
+        this.tapStart = false;
 
         this.ids = {};
         this.names = {};

tests/js/Test.js

@@ -16,6 +16,7 @@ function log(message) {
  * Test constructor
  */
 function Test() {
+    //this.testOnly = 'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap';
     this.testOnly = '';
     this.counter = 0;
     

tests/js/functionalTests.js

@@ -487,7 +487,7 @@ Test.prototype.tests = {
         layer.add(redBox);
         stage.add(layer);
     },
-    'EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap': function(containerId) {
+    'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -500,8 +500,7 @@ Test.prototype.tests = {
             radius: 70,
             fill: 'red',
             stroke: 'black',
-            strokeWidth: 4,
+            strokeWidth: 4
-            draggable: true
         });
 
         circle.on('mousedown', function() {
@@ -512,14 +511,6 @@ Test.prototype.tests = {
             log('mouseup');
         });
 
-        circle.on('touchstart', function() {
-            log('touchstart');
-        });
-
-        circle.on('touchend', function() {
-            log('touchend');
-        });
-
         circle.on('mouseover', function() {
             log('mouseover');
         });
@@ -528,6 +519,10 @@ Test.prototype.tests = {
             log('mouseout');
         });
 
+        circle.on('mousemove', function() {
+            log('mousemove');
+        });
+
         circle.on('click', function() {
             log('click');
         });
@@ -535,6 +530,24 @@ Test.prototype.tests = {
         circle.on('dblclick', function() {
             log('dblclick');
         });
+        /*
+         * mobile
+         */
+        circle.on('touchstart', function() {
+            log('touchstart');
+        });
+
+        circle.on('touchend', function() {
+            log('touchend');
+        });
+
+        circle.on('touchmove', function() {
+            log('touchmove');
+        });
+
+        circle.on('tap', function(evt) {
+            log('tap');
+        });
 
         circle.on('dbltap', function() {
             log('dbltap');