Question

我有一个svg矩形，在其4个边缘上带有4个缩放器，该矩形和缩放器都有其onmousedown / onmousemove / onmouseup事件监听器。

当我从调整器调整矩形大小时，当我停止调整元素的大小时，调整器的onmousemove不会停止，或者可能不会触发onmouseup。

这是我的代码：

用于拖放的矩形事件：

  onMouseDown = (e) => {
      if ( this.state.isDraggable ) {
        document.addEventListener('mousemove', this.onMouseMove);
        this.coords = {
          x: e.clientX,
          y: e.clientY
        }
      }
  }

  onMouseUp = (e) => {
    // this.props.updateStateDragging(this.props.id, false);
    document.removeEventListener('mousemove', this.onMouseMove);
    this.coords = {};
  }

  onMouseMove = (e) => {
    const xDiff = this.coords.x - e.clientX;
    const yDiff = this.coords.y - e.clientY;
    this.coords.x = e.clientX;
    this.coords.y = e.clientY;

    this.setState({
      x: this.state.x - xDiff,
      y: this.state.y - yDiff,
    });
  }

用于调整矩形大小的调整大小事件：

  onMouseDown = (e) => {
    document.addEventListener('mousemove', this.onMouseMove);
    this.props.updateStateResizing(this.props.id, true);
    this.props.updateStateDragging(this.props.id, false);
  }

  onMouseMove = (e) => {
    if ( this.props.isResizing ){
      this.props.nodeResizer(this.props.id, e.target, e.clientX, e.clientY);
    }
  }

  onMouseUp = (e) => {
    document.removeEventListener('mousemove', this.onMouseMove.bind(this));
    if ( this.props.isResizing ){
      this.props.updateStateResizing(this.props.id, false);
    }
  }

我在做什么错？如何解决？

Answer 1

用于删除“ mousemove”侦听器的调用必须提供与添加侦听器时提供的功能对象相同的功能对象。但是

this.onMouseMove

与

不是同一功能对象

this.onMouseMove.bind(this)

尝试从.bind(this)代码中删除onMouseUp。

技术说明

Rebinding an arrow function不会更改箭头功能中看到的this值。

箭头函数始终使用定义时有效的词法this值。从语法上讲，您可以在箭头函数上调用bind-它们是函数的objcts，并且继承自Function.prototype-但是arrow函数从不使用提供给this的{{1}}值。

Answer 2

尝试在任何使用document.removeEventListener的地方使用settimeout：

setTimeout(() => {
  document.removeEventListener('mousemove', this.onMouseMove.bind(this));
}, 500);

    onmousedown = (e) => {
      console.log("D>>>>>", e);
    }

    onmousemove = (e) => {
      console.log("M>>>>>", e);
    }

    onmouseup = (e) => {
      console.log("U>>>>>", e);
    }

example

onMouseMove不退出或onMouseUp不起作用

2 个答案: