remove event listener in reactJS

Question

I wants to remove event listener that are already in event listener.My Code is

  public componentDidMount() {
this.drags();
}
private drags(){
 const e = ReactDOM.findDOMNode(this.container);
    if (e) {
      e.addEventListener("mousedown", (event: any) => {
      ....
       parent = ReactDOM.findDOMNode(this).parentNode;
       if (parent) {
         parent.addEventListener("mousemove", (event1: any) => {
         ....
         const eDrag = parent.getElementsByClassName("draggable");
          eRes[0].addEventListener("mouseup", (event3: any) => {
          **// HERE I WANT TO REMOVE LISTENER OF PARENT OF MOUSE MOVE**
          }
        }
       }

    }
  }

}

Can anybody help me in this ?

Use removeEventListener - You need to match the listener, best done with "named" listeners, as explained in the linked Documentation above, i.e: parent.addEventListener("mousemove", yourNamedHandler) then do parent.removeEventListener("mousemove", yourNamedHandler) - This is basic JavaScript and you should find lots of examples on SO, Google and the linked MDN Documentation. — Nope
– Nope, Commented Apr 18, 2018 at 11:32
If you just want to brute force remove any/all event listeners instead of removing them individually from an element you are quicker cloning the element and replacing it as that removes all listeners as seen here: stackoverflow.com/questions/9251837/… — Nope
– Nope, Commented Apr 18, 2018 at 11:38

Jackyef · Accepted Answer · 2018-04-18 10:43:40Z

1

Do not use anonymous function as the event handler, use a named function instead.

So, if you add the listener this way:

function doSomething() {
  // something 
}

window.addEventListener('mousedown', this.doSomething);

You can remove it like:

window.removeEventListener('mousedown', this.doSomething);

answered Apr 18, 2018 at 10:43

Jackyef

5,0421 gold badge21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Neha Takhi Over a year ago

As Per code , mouseup event is adding in mousemove event which is parent. Now from child , i wants to remove parent mousemove listener.

Jackyef Over a year ago

Of course, the point is using named function. Have you tried to do parent.removeEventListener, but actually using named function?

Collectives™ on Stack Overflow

remove event listener in reactJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related