fix bug for touchend event. close #156

CHANGELOG.md

@@ -4,6 +4,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Not released][Not released]
 
+### Fixed
+- Bug fix for case when `touchend` event throws error
+
+
+
 ## [0.15.0][2016-06-18]
 
 ## Added

konva.js

@@ -3,7 +3,7 @@
  * Konva JavaScript Framework v0.15.0
  * http://konvajs.github.io/
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Sat Jun 18 2016
+ * Date: Tue Jul 05 2016
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@@ -9239,7 +9239,7 @@
                 shape._fireAndBubble(TOUCHEND, {evt: evt});
 
                 // detect if tap or double tap occurred
-                if(Konva.listenClickTap && shape._id === this.tapStartShape._id) {
+                if(Konva.listenClickTap && this.tapStartShape && shape._id === this.tapStartShape._id) {
                     shape._fireAndBubble(TAP, {evt: evt});
 
                     if(fireDblClick) {

src/Stage.js

@@ -592,7 +592,7 @@
                 shape._fireAndBubble(TOUCHEND, {evt: evt});
 
                 // detect if tap or double tap occurred
-                if(Konva.listenClickTap && shape._id === this.tapStartShape._id) {
+                if(Konva.listenClickTap && this.tapStartShape && shape._id === this.tapStartShape._id) {
                     shape._fireAndBubble(TAP, {evt: evt});
 
                     if(fireDblClick) {

test/functional/TouchEvents-test.js

@@ -235,4 +235,59 @@ suite('TouchEvents', function() {
             done();
         }, 17);
     });
-});
+
+    // test for https://github.com/konvajs/konva/issues/156
+    test("touchstart out of shape, then touch end inside shape", function() {
+      var stage = addStage();
+      var layer = new Konva.Layer();
+      var circle = new Konva.Circle({
+          x: 100,
+          y: 100,
+          radius: 70,
+          fill: 'green',
+          stroke: 'black',
+          strokeWidth: 4,
+          name: 'myCircle'
+      });
+
+      layer.add(circle);
+      stage.add(layer);
+
+      var circleTouchend =
+          stageContentTouchstart =
+          stageContentTouchend =
+          0;
+
+      var top = stage.content.getBoundingClientRect().top;
+
+      circle.on('touchend', function() {
+        circleTouchend++;
+      });
+
+      stage.on('contentTouchstart', function() {
+        stageContentTouchstart++;
+      });
+
+      stage.on('contentTouchend', function() {
+        stageContentTouchend++;
+      });
+
+      stage._touchstart({
+          touches: [{
+              clientX: 1,
+              clientY: 1 + top
+          }]
+      });
+
+      stage._touchend({
+        touches: [{
+            clientX: 100,
+            clientY: 100 + top
+        }]
+      });
+
+      assert.equal(stageContentTouchstart, 1);
+      assert.equal(stageContentTouchend, 1);
+      assert.equal(circleTouchend, 1);
+    });
+});