fix(g-base): event object of event delegation and propagation is inco…

…rrect, close #249

packages/g-base/src/event/event-contoller.ts

@@ -92,10 +92,14 @@ function emitDelegation(container, type, eventObj) {
     const name = element.get('name');
     if (name) {
       const eventName = name + DELEGATION_SPLIT + type;
+      // 不同的事件委托拥有独立的 eventObj 对象
+      const newEventObj = {
+        ...eventObj,
+      };
       if (events[eventName]) {
-        eventObj.delegateTarget = container;
-        eventObj.currentTarget = element;
-        container.emit(eventName, eventObj);
+        newEventObj.delegateTarget = container;
+        newEventObj.currentTarget = element;
+        container.emit(eventName, newEventObj);
       }
     }
   }
@@ -123,9 +127,13 @@ function bubbleEvent(container, type, eventObj) {
       eventObj.bubbles = false;
       return;
     }
+    // 不同的事件冒泡拥有独立的 eventObj 对象
+    const newEventObj = {
+      ...eventObj,
+    };
     // 绑定事件的对象
-    eventObj.currentTarget = container;
-    container.emit(type, eventObj);
+    newEventObj.currentTarget = container;
+    container.emit(type, newEventObj);
   }
 }
 

packages/g-canvas/tests/bugs/issue-249-spec.js

@@ -0,0 +1,103 @@
+const expect = require('chai').expect;
+import Canvas from '../../src/canvas';
+import { simulateMouseEvent, getClientPoint } from '../util';
+
+const dom = document.createElement('div');
+document.body.appendChild(dom);
+dom.id = 'c1';
+
+describe('#249', () => {
+  const canvas = new Canvas({
+    container: dom,
+    width: 600,
+    height: 600,
+  });
+
+  const el = canvas.get('el');
+
+  it('eventObj of event delegation should be independent', () => {
+    const group = canvas.addGroup({
+      name: 'group',
+    });
+    const circle = group.addShape('circle', {
+      name: 'circle',
+      attrs: {
+        x: 50,
+        y: 50,
+        r: 50,
+        fill: 'red',
+      },
+    });
+
+    const { clientX, clientY } = getClientPoint(canvas, 50, 50);
+    let ev1;
+    let ev2;
+
+    canvas.on('group:click', (e) => {
+      ev1 = e;
+    });
+
+    group.on('circle:click', (e) => {
+      ev2 = e;
+    });
+
+    simulateMouseEvent(el, 'mousedown', {
+      clientX,
+      clientY,
+    });
+
+    simulateMouseEvent(el, 'mouseup', {
+      clientX,
+      clientY,
+    });
+
+    expect(ev1.target).eqls(circle);
+    expect(ev1.currentTarget).eqls(group);
+    expect(ev1.delegateTarget).eqls(canvas);
+    expect(ev2.target).eqls(circle);
+    expect(ev2.currentTarget).eqls(circle);
+    expect(ev2.delegateTarget).eqls(group);
+  });
+
+  it('eventObj of event propagation should be independent', () => {
+    const group = canvas.addGroup({
+      name: 'group',
+    });
+    const circle = group.addShape('circle', {
+      name: 'circle',
+      attrs: {
+        x: 50,
+        y: 50,
+        r: 50,
+        fill: 'red',
+      },
+    });
+
+    const { clientX, clientY } = getClientPoint(canvas, 50, 50);
+    let ev1;
+    let ev2;
+
+    canvas.on('click', (e) => {
+      ev1 = e;
+    });
+
+    group.on('click', (e) => {
+      ev2 = e;
+    });
+
+    simulateMouseEvent(el, 'mousedown', {
+      clientX,
+      clientY,
+    });
+
+    simulateMouseEvent(el, 'mouseup', {
+      clientX,
+      clientY,
+    });
+
+    expect(ev1.target).eqls(circle);
+    expect(ev1.currentTarget).eqls(canvas);
+    expect(ev2.target).eqls(circle);
+    expect(ev2.currentTarget).eqls(group);
+  });
+});