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。