removeEventListener doesn't work in Javascript

Question

I have the following code to listen and remove the event. However, the event doesn't get removed:

window.addEventListener('mousemove', (event) => {
    this.controlColumnWidth(event, startOffset, column)
})
window.removeEventListener('mouseup', this.controlColumnWidth)

How do I fix this?

You are adding event mousemove and removing event mouseup. The events do not match — Ankit Agarwal
– Ankit Agarwal, Commented Aug 23, 2018 at 13:28

Decade Moon · Accepted Answer · 2018-08-23 13:34:15Z

3

You're mixing two different events here, mousemove and mouseup.

Also you need to make sure you remove the same (event) => { ... } function instance that was originally registered:

const handler = event => {
  this.controlColumnWidth(event, startOffset, column);
};

window.addEventListener('mousemove', handler);
window.removeEventListener('mousemove', handler);

// You can also store the handler on `this` if you need to remove
// the event in a different function (such as in the destroyed hook)

edited Aug 23, 2018 at 13:34

answered Aug 23, 2018 at 13:28

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

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

3 Comments

Axel Over a year ago

Thanks a lot man for the code. However, what I need to do is when mouseup event fires, mousemove should be removed. Anyway, this is possible?

Emile Bergeron Over a year ago

@Sanjay just call the removeEventListener function inside the event handler function for the mouseup event.

Axel Over a year ago

@EmileBergeron Gotcha!

Collectives™ on Stack Overflow

removeEventListener doesn't work in Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related