onMouseMove不退出或onMouseUp不起作用

Question

我有一个svg矩形，其4个边上有4个resizer，矩形和resizer都有onmousedown / onmousemove / onmouseup事件监听器。

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

这是我的代码：

用于拖放的矩形事件：

  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

onclick 事件会在一次完整的鼠标左键按下并松开之后触发, 一般 onmouseup 是先于 onclick 事件触发。 但是鼠标左键按下不松开，并移动鼠标之后松开鼠标左键，结果是 onmouseup 并不会触发。 利用 onclick 是在 onmouseup 之后触发的特点，用 onclick 替代 onmouseup

Answer 2

onclick 事件会在一次完整的鼠标左键按下并松开之后触发, 一般 onmouseup 是先于 onclick 事件触发。 但是鼠标左键按下不松开，并移动鼠标之后松开鼠标左键，结果是 onmouseup 并不会触发。 利用 onclick 是在 onmouseup 之后触发的特点，用 onclick 替代 onmouseup

Answer 3

尝试使用settimeout，无论您在何处使用document.removeEventListener，如：setTimeout(() => {   document.removeEventListener('mousemove', this.onMouseMove.bind(this));}, 500);

Answer 4

删除“mousemove”侦听器的调用必须提供添加侦听器时提供的相同功能对象。然而this.onMouseMove与功能对象不同this.onMouseMove.bind(this)尝试.bind(this)在onMouseUp代码中删除以开始。技术说明重新绑定箭头功能不会更改箭头功能中this看到的值。箭头函数始终使用在this定义它们时生效的词法值。从句法bind上讲，你可以调用一个箭头函数 - 它们是函数对象并从中继承Function.prototype- 但是箭头函数从不使用this提供的值bind。