onMouseMove doesn't exit or onMouseUp doesn't work

Question

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.

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.

Here is my code:

The rectangle events used for drag and drop:

  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,
    });
  }

The resizer events used to resize the rectangle:

  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);
    }
  }

What am I doing wrong? How can it fix it?

Can you provide some code how you're adding the mousedown and mouseup events to your component. And how is the property `isResizing` set? My first guess is, this should be a state property and not be provided as component property from outside. — Auskennfuchs, May 16 '19 at 21:30
Here how the mousedown and mouseup are added: ` return( ); ` the `isResizing` is defined at the node level as it is the target of the resize and it could be locked by another component. — chafik bel, May 16 '19 at 22:21
Does dragging have anything to do with the problem - if you remove the dragging code, does the resize problem stay the same? — traktor, May 17 '19 at 00:13
I removed the dragging code, and still have the same problem. — chafik bel, May 17 '19 at 08:09
All I can suggest is to edit the question and include a [cut-down but complete example](https://stackoverflow.com/help/reprex) so that readers can reproduce the problem and help further. — traktor, May 18 '19 at 00:29

traktor · Answer 1 · 2019-05-16T22:32:09.013

The call to remove the "mousemove" listener must supply the same function object as supplied when adding the listener. However

this.onMouseMove

is not the same function object as

this.onMouseMove.bind(this)

Try removing .bind(this) in the onMouseUp code to start with.

Technical Note

Rebinding an arrow function does not change the this value seen within the arrow function.

Arrow functions always use the lexical this value that was in effect at the time they were defined. Syntactically you can call bind on an arrow function - they are function objcts and inherit from Function.prototype - but the arrow function never uses the this value supplied to bind.

Saqib · Answer 2 · 2019-05-17T17:24:34.030

0

Try using settimeout wherever you are using document.removeEventListener like:

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

edited May 17 '19 at 17:24

answered May 16 '19 at 22:11

Saqib

371
2
13

I'm using `removeEventListener` inside the `onMouseUp` which never triggers, this is my main question. – chafik bel May 16 '19 at 22:23
I have tried the following and it works onmousedown = (e) => { console.log("D>>>>>", e); } onmousemove = (e) => { console.log("M>>>>>", e); } onmouseup = (e) => { console.log("U>>>>>", e); } – Saqib May 17 '19 at 17:16

onMouseMove doesn't exit or onMouseUp doesn't work

2 Answers2