fix event trigger flow. close #989

konva.js

@@ -4508,7 +4508,7 @@
           // if no cache for listeners, we need to pre calculate it
           if (!listeners) {
               listeners = {};
-              var obj = this;
+              var obj = Object.getPrototypeOf(this);
               while (obj) {
                   if (!obj.eventListeners) {
                       obj = Object.getPrototypeOf(obj);
@@ -4526,13 +4526,21 @@
           return listeners[eventType];
       };
       Node.prototype._fire = function (eventType, evt) {
-          var events = this._getListeners(eventType), i;
+          evt = evt || {};
-          if (events) {
+          evt.currentTarget = this;
-              evt = evt || {};
+          evt.type = eventType;
-              evt.currentTarget = this;
+          var topListeners = this._getListeners(eventType);
-              evt.type = eventType;
+          if (topListeners) {
-              for (i = 0; i < events.length; i++) {
+              for (var i = 0; i < topListeners.length; i++) {
-                  events[i].handler.call(this, evt);
+                  topListeners[i].handler.call(this, evt);
+              }
+          }
+          // it is important to iterate over self listeners without cache
+          // because events can be added/removed while firing
+          var selfListeners = this.eventListeners[eventType];
+          if (selfListeners) {
+              for (var i = 0; i < selfListeners.length; i++) {
+                  selfListeners[i].handler.call(this, evt);
               }
           }
       };

src/Node.ts

@@ -2285,7 +2285,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     // if no cache for listeners, we need to pre calculate it
     if (!listeners) {
       listeners = {};
-      let obj = this;
+      let obj = Object.getPrototypeOf(this);
       while (obj) {
         if (!obj.eventListeners) {
           obj = Object.getPrototypeOf(obj);
@@ -2305,16 +2305,23 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     return listeners[eventType];
   }
   _fire(eventType, evt) {
-    var events = this._getListeners(eventType),
+    evt = evt || {};
-      i;
+    evt.currentTarget = this;
+    evt.type = eventType;
 
-    if (events) {
+    const topListeners = this._getListeners(eventType);
-      evt = evt || {};
+    if (topListeners) {
-      evt.currentTarget = this;
+      for (var i = 0; i < topListeners.length; i++) {
-      evt.type = eventType;
+        topListeners[i].handler.call(this, evt);
+      }
+    }
 
-      for (i = 0; i < events.length; i++) {
+    // it is important to iterate over self listeners without cache
-        events[i].handler.call(this, evt);
+    // because events can be added/removed while firing
+    const selfListeners = this.eventListeners[eventType];
+    if (selfListeners) {
+      for (var i = 0; i < selfListeners.length; i++) {
+        selfListeners[i].handler.call(this, evt);
       }
     }
   }

test/unit/DragAndDrop-test.js

@@ -144,6 +144,46 @@ suite('DragAndDrop', function () {
     Konva.dragButtons = [0];
   });
 
+  // ======================================================
+  test('changing draggable on mousedown should take effect', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var circle = new Konva.Circle({
+      x: stage.getWidth() / 2,
+      y: stage.getHeight() / 2,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle',
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    circle.on('mousedown', () => {
+      circle.draggable(true);
+    });
+
+    stage.simulateMouseDown({
+      x: circle.x(),
+      y: circle.y(),
+    });
+
+    stage.simulateMouseMove({
+      x: circle.x() + 10,
+      y: circle.y() + 10,
+    });
+
+    assert.equal(circle.isDragging(), true);
+
+    stage.simulateMouseUp({
+      x: circle.x() + 10,
+      y: circle.y() + 10,
+    });
+  });
+
   // ======================================================
   test('while dragging do not draw hit', function () {
     var stage = addStage();