title: onMouseMove doesn't exit or onMouseUp doesn't work
body: <p>I have an svg rectangle with 4 resizers on its 4 edges, both the rectangle and the resizers have their onmousedown/onmousemove/onmouseup event listeners.</p>
  
  <p>When I resize the rectangle from the resizers the onmousemove of the resizer doesn't stop when I stop resizing the element or maybe the onmouseup is not triggered.</p>
  
  <p>Here is my code:</p>
  
  <p>The rectangle events used for drag and drop:</p>
  
  <pre><code>  onMouseDown = (e) =&gt; {
        if ( this.state.isDraggable ) {
          document.addEventListener('mousemove', this.onMouseMove);
          this.coords = {
            x: e.clientX,
            y: e.clientY
          }
        }
    }
  
    onMouseUp = (e) =&gt; {
      // this.props.updateStateDragging(this.props.id, false);
      document.removeEventListener('mousemove', this.onMouseMove);
      this.coords = {};
    }
  
    onMouseMove = (e) =&gt; {
      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,
      });
    }
  </code></pre>
  
  <p>The resizer events used to resize the rectangle:</p>
  
  <pre><code>  onMouseDown = (e) =&gt; {
      document.addEventListener('mousemove', this.onMouseMove);
      this.props.updateStateResizing(this.props.id, true);
      this.props.updateStateDragging(this.props.id, false);
    }
  
    onMouseMove = (e) =&gt; {
      if ( this.props.isResizing ){
        this.props.nodeResizer(this.props.id, e.target, e.clientX, e.clientY);
      }
    }
  
    onMouseUp = (e) =&gt; {
      document.removeEventListener('mousemove', this.onMouseMove.bind(this));
      if ( this.props.isResizing ){
        this.props.updateStateResizing(this.props.id, false);
      }
    }
  
  </code></pre>
  
  <p>What am I doing wrong? How can it fix it?</p>