能否在am5.Container上处理pointerover事件？HTML标签悬停无响应

问题原因 #

当你给amCharts的Container设置html属性时，生成的HTML元素会覆盖在amCharts的canvas渲染层上方，导致amCharts自身的pointerover/pointerout事件无法触发（click事件能正常工作是因为amCharts做了特殊处理）。

解决方案 #

提供两种可行方案，按需选择：

方案1：用amCharts原生组件替代HTML（推荐）

放弃直接使用HTML字符串，改用amCharts提供的Image、Label等原生组件构建内容，确保事件系统正常响应：

pointSeries.bullets.push(
  (_: Root, _2: Series, dataItem: DataItem<IMapPointSeriesDataItem>): Bullet => {
    const { countryCode, img } = dataItem.dataContext as IMapData;

    // 用原生Container+Image+Label构建内容
    const container = am5.Container.new(root, {
      cursorOverStyle: 'pointer',
      interactive: true,
      x: am5.percent(50),
      centerX: am5.percent(50),
      layout: am5.Layout.Horizontal, // 横向排列图片和文字
      paddingLeft: 5,
      paddingRight: 5,
      paddingTop: 2,
      paddingBottom: 2
    });

    // 添加图片
    const imgSprite = container.children.push(
      am5.Image.new(root, {
        src: img,
        width: 20,
        height: 20,
        marginRight: 5
      })
    );

    // 添加文字标签
    const label = container.children.push(
      am5.Label.new(root, {
        text: countryCode,
        fill: am5.color(0x000000),
        centerY: am5.percent(50)
      })
    );

    // 绑定pointerover事件
    container.events.on('pointerover', () => {
      label.set('text', 'hover文本');
      // 可按需修改图片或样式
      // imgSprite.set('src', 'hover-img.png');
    });

    // 绑定pointerout事件
    container.events.on('pointerout', () => {
      label.set('text', countryCode);
      // imgSprite.set('src', img);
    });

    container.events.on('click', function () {
      console.log(12345);
      label.set('text', '点击后的文本');
    });

    return am5.Bullet.new(root, {
      sprite: container,
    });
  },
);

方案2：给生成的HTML元素绑定原生鼠标事件

若必须使用HTML内容，可通过container.get("htmlElement")获取生成的DOM元素，绑定原生mouseover和mouseout事件：

pointSeries.bullets.push(
  (_: Root, _2: Series, dataItem: DataItem<IMapPointSeriesDataItem>): Bullet => {
    const { countryCode, img } = dataItem.dataContext as IMapData;

    const container = am5.Container.new(root, {
      cursorOverStyle: 'pointer',
      interactive: true,
      html: `
        <div class="country-label">
            <img src="${img}" alt="img">
            ${countryCode}
        </div>
        `,
      x: am5.percent(50),
      centerX: am5.percent(50),
    });

    // 等待HTML元素渲染完成后绑定原生事件
    container.events.on("ready", () => {
      const htmlElement = container.get("htmlElement") as HTMLElement;
      if (htmlElement) {
        // 原生mouseover事件
        htmlElement.addEventListener("mouseover", () => {
          container.set('html', '<div>hover文本</div>');
        });

        // 原生mouseout事件
        htmlElement.addEventListener("mouseout", () => {
          container.set('html', `
            <div class="country-label">
                <img src="${img}" alt="img">
                ${countryCode}
            </div>
          `);
        });
      }
    });

    container.events.on('click', function () {
      console.log(12345);
      container.set('html', '<div>点击后的文本</div>');
    });

    return am5.Bullet.new(root, {
      sprite: container,
    });
  },
);

注意事项 #

• 方案1适配amCharts原生事件和动画机制，无层级或事件冲突问题。
• 方案2中，每次调用container.set('html', ...)重新渲染后，之前绑定的原生事件会失效，需重新绑定。

内容的提问来源于stack exchange，提问作者Виктор Поляков