javascript - OnMouseDown 在散点图中多次触发

Question

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

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

现在，当没有应用过滤器并显示所有数据时，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);
          }
        },
      );
    },
  },
]}