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

看下面的sn-p...

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);
          }
        },
      );
    },
  },
]}