AnyGantt DataGrid自定义HTML控件无法点击的技术求助

问题背景 #

使用AnyChart的AnyGantt模块（版本8.12.1.1937，2024-04-10）时，在DataGrid区域添加自定义HTML控件（文本框、下拉框、复选框等）后遇到交互障碍：

• 控件已成功渲染，但点击时只会触发图表的rowClick事件，控件无法直接获得焦点，仅能通过Tab键切换聚焦。
• 尝试过以下操作未解决问题：
  • 启用/禁用图表编辑：chart.edit(false);
  • 在rowClick事件中阻止默认行为：chart.listen("rowClick", function (e) { e.preventDefault() });
• 官方文档未提供DataGrid单元格级事件，通过rowClick指定聚焦控件无法区分具体点击目标，需要实现点击哪个控件就聚焦哪个的效果。

解决方案 #

核心思路是通过DOM事件委托，在图表容器上直接拦截控件的点击操作，阻止事件冒泡到图表的内置rowClick逻辑，同时让控件直接获得焦点。

修改后的代码示例 #

anychart.onDocumentReady(function () {
  anychart.data.loadJsonFile(
    'https://cdn.anychart.com/samples/gantt-charts/human-resource-chart/data.json',
    function (data) {
      var treeData = anychart.data.tree(data, 'as-table');
      var chart = anychart.ganttResource();
      chart.data(treeData);

      chart
        .rowSelectedFill('#D4DFE8')
        .rowHoverFill('#EAEFF3')
        .splitterPosition(150);

      var dataGrid = chart.dataGrid();

      dataGrid
        .column(0)
        .title('#')
        .width(30)
        .labels({ hAlign: 'center' });
      
      let colJunk1 = dataGrid.column(1);
      colJunk1.width(120);
      colJunk1.title().useHtml(true).text('<span style="font-weight: 600; font-size: 11px">Textboxes</span>');
      colJunk1.labels().useHtml(true).format('<input id="text_{%id}" type="text" value="row {%id} value"/>');
      
      let colJunk2 = dataGrid.column(2);
      colJunk2.width(120);
      colJunk2.title().useHtml(true).text('<span style="font-weight: 600; font-size: 11px">Dropdowns</span>');
      colJunk2.labels().useHtml(true).format(`<select id="select_{%id}">
          <option value="apple">Apple</option>
          <option value="banana">Banana</option>
          <option value="cherry">Cherry</option>
      </select>`);

      chart.container('container');
      chart.splitterPosition("250");
      chart.draw();
      chart.zoomTo(1171036800000, 1176908400000);

      // 关键：给图表容器添加事件委托，拦截控件点击
      const chartContainer = document.getElementById('container');
      chartContainer.addEventListener('click', function(e) {
        const target = e.target;
        // 判断点击目标是否为自定义控件
        if (['INPUT', 'SELECT'].includes(target.tagName)) {
          e.stopPropagation(); // 阻止事件冒泡到图表的rowClick事件
          target.focus(); // 让控件直接获得焦点
        }
      });
    }
  );
});

方案说明 #

1. 事件委托：利用DOM事件冒泡机制，在图表容器上监听点击事件，能捕获到容器内所有控件的点击操作，无需为每个动态生成的控件单独绑定事件。
2. 阻止冒泡：e.stopPropagation()阻止事件向上传递到图表的内置事件监听，避免rowClick事件拦截控件的点击行为。
3. 直接聚焦：触发控件的focus()方法，确保点击时控件立即获得焦点，实现预期交互效果。

内容的提问来源于stack exchange，提问作者dmboucher