时间戳

首页 > 解决方案 > 使用 highcharts 移除事件监听器

reactjs - 使用 highcharts 移除事件监听器

问题描述

我使用 highcharts 库制作了一个 3d 散点图。我还让它可拖动并添加了鼠标事件。现在，我无法删除事件侦听器。

单击时，图表会移动..但在第二次单击时...我想停止拖动图表。它应该停止移动。

like so
 const init = (chart) => {
    window.addEventListener("click", (eStart) => {
      isClicked = true;
      console.log("click");
      const posX = eStart.chartX,
        posY = eStart.chartY,
        alpha = chartOptions.chart.options3d.alpha,
        beta = chartOptions.chart.options3d.beta,
        sensitivity = 4; // lower is more sensitive

      const drag = (e) => {
        {
          const newBeta = beta + (posX - e.pageX) / sensitivity;
          chart.options.chart.options3d.beta = newBeta;
          // Run alpha
          const newAlpha = alpha + (e.pageY - posY) / sensitivity;
          chart.options.chart.options3d.alpha = newAlpha;
          chart.redraw(false);
        }
      };

      window.addEventListener("touchmove", (e) => drag(e));
      window.addEventListener("mousemove", (e) => drag(e));

      window.addEventListener("mouseup", (e) => unBind(e));
      window.addEventListener("touchend", (e) => unBind(e));
    });
  };
  const unBind = (e) => {
    console.log("mouse up triggered");
    e.preventDefault();
    e.stopPropagation();
    isClicked = false;
    window.removeEventListener("mousemove", () => {});
  };

标签： reactjshighcharts

解决方案

我将从我们官方的 Highcharts React 包装器开始：

https://github.com/highcharts/highcharts-react

假设我们有这个 scatter 3d 示例作为我们的模板：

https://stackblitz.com/edit/react-rhbyat?file=index.js

你想第二次阻止移动点，对吧？

推荐阅读