OnMouseDown 在 Scatterplot 中触发不止一次

Question

我在工作中使用 React，我们使用 Google Charts 来展示一些数据。 现在显示数据工作正常。 这是一堆数据点，可以通过选中一些复选框来过滤。

单击复选框时，将重新评估整个数据集，以便删除与过滤器不匹配的条目。 然后将过滤后的数据放在一个单独的集合中，然后将过滤后的数据集放回 Chart 对象中进行显示。

现在，当没有应用过滤器并显示所有数据时， onmousedown事件完全正常触发。 就一次。 但是，当我应用过滤器（或任何数量的过滤器）时， onmousedown事件会多次触发。 有时，事件会从我没有点击的点返回数据。 但每次它也会返回我点击过的数据，只是多次。

我不太明白这种行为：

<Chart
chartType="ScatterChart"
width="100%"
height="480px"
loader={<div>Loading Chart</div>}
data={filteredData}
options={chartOptions}
rootProps={{ 'data-testid': '1' }}
chartEvents={[
  {
    eventName: 'ready',
    callback: ({ chartWrapper, google }) => {
      const chart = chartWrapper.getChart();
      google.visualization.events.addListener(
        chart,
        'onmousedown',
        e => {
          const { targetID } = e;
          if (targetID.includes('point')) {
            const tableEntry = FlowUtil.getChartEntryOnClick(
              filteredData,
              targetID,
            );
            handleOnMouseClick(tableEntry);
          }
        },
      );
    },
  },
]}
/>

是因为我需要使用不同的事件，还是因为我处理的事件全都错了？ 还是因为我正在更改数据而缓存是罪魁祸首？ 我在这里有点想法。

Answer 1

该事件被多次触发，
因为它被多次添加，
每次图表的'ready'事件触发时。

在添加侦听器之前，删除所有先前添加的侦听器，
通过使用 --> google.visualization.events.removeAllListeners(chart);

看下面的片段...

chartEvents={[
  {
    eventName: 'ready',
    callback: ({ chartWrapper, google }) => {
      const chart = chartWrapper.getChart();

      google.visualization.events.removeAllListeners(chart);

      google.visualization.events.addListener(
        chart,
        'onmousedown',
        e => {
          const { targetID } = e;
          if (targetID.includes('point')) {
            const tableEntry = FlowUtil.getChartEntryOnClick(
              filteredData,
              targetID,
            );
            handleOnMouseClick(tableEntry);
          }
        },
      );
    },
  },
]}