[Bug] 甘特图自定义渲染任务条,给内部元素添加事件后无法阻止事件冒泡

[dream-weave]

Version

1.17.2

Link to Minimal Reproduction

/

Steps to Reproduce

使用自定义渲染任务条 taskBar: { startDateField: 'startDate', endDateField: 'endDate', progressField: 'progress', labelText: '{student.name}', labelTextStyle: { // fontFamily: 'Arial', fontSize: 14, textAlign: 'center', color: 'white', }, barStyle: { width: 24, /** 任务条的颜色 / barColor: 'rgba(33, 94, 190, 0.16)', /* 已完成部分任务条的颜色 / completedBarColor: '#91e8e0', /* 任务条的圆角 */ cornerRadius: 2, borderColor: 'transparent', borderLineWidth: 1, }, dragOrder: false, moveable: false, resizable: false, scheduleCreatable: true,

customLayout: (args) => {
  const { width, height, taskRecord } = args;
  const container = new VTableGantt.VRender.Group({
    width,
    height,
    fill:
      taskRecord.auditStatus === RoomOrderAuditStatusEnum.WAITING
        ? '#5EAFFB'
        : '#75DCA7',
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'nowrap',
    justifyContent: 'space-between',
    alignItems: 'center',
  });

  const title = new VTableGantt.VRender.Text({
    text: taskRecord.student.name,
    fontSize: 14,
    fontFamily: 'sans-serif',
    fill: 'white',
    maxLineWidth: width - 24,
    boundsPadding: [0, 0, 0, 0],
  });
  container.add(title);

  const icon = new VTableGantt.VRender.Image({
    width: 24,
    height: 24,
    x: 0,
    y: 0,
    image:
      '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Design Icons by Pictogrammers - https://github.com/Templarian/MaterialDesign/blob/master/LICENSE --><path fill="red" d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6z"/></svg>',
    // boundsPadding: [0, 0, 0, 10],
  });
  icon.addEventListener('click', (event: any) => {
    event.stopPropagation();
    event.stopImmediatePropagation();
    console.log(event);
  });
  container.add(icon);

  return {
    rootContainer: container,
    // renderDefaultBar: true
    // renderDefaultText: true
  };
},

} 在console中能看见事件被触发了,但是阻止事件冒泡失败,该事件依然冒泡到了顶部

Current Behavior

无法阻止事件冒泡

Expected Behavior

希望能在自定义渲染的时候事件能正确触发

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[fangsmile]

请问你是怎么知道没有组织冒泡的呢 你在他的父级节点上监听同样的事件了吗 @RanMaoting

[dream-weave]

文档中提供了Gantt API.Events.CLICK_TASK_BAR这个事件,按照渲染结构来说,使用customLayout在任务条中加的元素应该是属于任务条的子元素,如果能正确阻止冒泡,那Gantt API.Events.CLICK_TASK_BAR应该不会被触发,但是现在自定义元素上的点击事件和Gantt API.Events.CLICK_TASK_BAR两个事件都被触发了