fix click event flow a little. close #1755

src/Stage.ts

@@ -551,6 +551,7 @@ export class Stage extends Container<Layer> {
 
       // no shape detected? do nothing
       if (!shape || !shape.isListening()) {
+        this[eventType + 'ClickStartShape'] = undefined;
         return;
       }
 

test/unit/MouseEvents-test.ts

@@ -2377,4 +2377,67 @@ describe('MouseEvents', function () {
     });
     assert.deepEqual(stage.getPointerPosition(), { x: 60, y: 60 });
   });
+
+  it('mousedown on empty then mouseup on shape', function () {
+    if (isNode) {
+      return;
+    }
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    stage.on('mousedown mousemove mouseup click', function (e) {
+      console.log('state', e.type);
+    });
+
+    var rect = new Konva.Rect({
+      width: 50,
+      height: 50,
+      fill: 'red',
+      draggable: true,
+    });
+    layer.add(rect);
+
+    layer.draw();
+
+    var clicks = 0;
+    rect.on('click', function () {
+      console.log('click');
+      clicks += 1;
+      if (clicks === 2) {
+        debugger;
+      }
+    });
+
+    simulateMouseDown(stage, {
+      x: 40,
+      y: 40,
+    });
+
+    simulateMouseUp(stage, {
+      x: 40,
+      y: 40,
+    });
+
+    // trigger click
+    assert.equal(clicks, 1, 'clicks not triggered');
+
+    // mousedown outside
+    simulateMouseDown(stage, {
+      x: 60,
+      y: 6,
+    });
+    // move into rect
+    simulateMouseMove(stage, {
+      x: 40,
+      y: 40,
+    });
+    // mouseup inside rect
+    simulateMouseUp(stage, {
+      x: 40,
+      y: 40,
+    });
+    // it shouldn't trigger the click event!!!
+    assert.equal(clicks, 1, 'clicks not triggered');
+  });
 });

test/unit/TouchEvents-test.ts

@@ -460,11 +460,11 @@ describe('TouchEvents', function () {
     );
     assert.equal(touchEnd, 1);
     assert.equal(stageTouchEnd, 1);
-    assert.equal(stageTap, 2, 'one tap should be fired');
+    assert.equal(stageTap, 1, 'one tap should be fired');
 
     assert.equal(
       stageEventStack.join(' '),
-      'touchstart touchstart touchstart touchend tap tap',
+      'touchstart touchstart touchstart touchend tap',
       'should fire tap after touchend'
     );
 
@@ -481,7 +481,7 @@ describe('TouchEvents', function () {
     assert.equal(touchEnd, 2);
     assert.equal(touchEnd2, 1);
     assert.equal(stageTouchEnd, 3);
-    assert.equal(stageTap, 2, 'still one tap should be fired');
+    assert.equal(stageTap, 1, 'still one tap should be fired');
     // Don't need to check event stack here, the pointers moved so no tap is fired
   });