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-base/tests/unit/event-spec.js

@@ -85,7 +85,7 @@ describe('test event object', () => {
     expect(event.defaultPrevented).eql(true);
   });
 
-  it('stopProgation', () => {
+  it('stopPropagation', () => {
     event.stopPropagation();
     expect(event.propagationStopped).eql(true);
   });
@@ -829,7 +829,7 @@ describe('test graphic events', () => {
     group1.set('name', null);
   });
 
-  it('stopProgation', () => {
+  it('stopPropagation', () => {
     let group1Called = false;
     let group11Called = false;
     let canvasCalled = false;
@@ -853,6 +853,7 @@ describe('test graphic events', () => {
     });
     let current;
     group1.set('name', 'my-name');
+    // 由于 group11 阻止了事件冒泡，因此 group1 上不会触发 click 事件
     canvas.on('my-name:click', (ev) => {
       current = ev.currentTarget;
       delegateCalled = true;
@@ -881,8 +882,8 @@ describe('test graphic events', () => {
 
     expect(group1Called).eql(false);
     expect(canvasCalled).eql(false);
-    expect(delegateCalled).eql(true);
-    expect(current).eql(group1);
+    expect(delegateCalled).eql(false);
+    expect(current).eql(undefined);
     canvas.off();
     group1.off();
     shape4.off();

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);
+  });
+});