removeEventListener is not working

I don't know what I am doing wrong but here is an example of what I am doing and it doesn't seem to work.

someDom.addEventListener('mousemove',function(ev) {self.onInputMove(ev)},false);

someDom.removeEventListener('mousemove',self.onInputMove);

The removeEventListener code is executed but it just doesn't remove the 'mousemove' listener

Answers:

Answer

removeEventListener removes the listener that exactly matches the function that was added.

In this case, the function that addEventListener added was:

var some_func = function(ev) {
    self.onInputMove(ev);
};

Store a reference to the actual function and you'll be good. So for example, the following should work:

someDom.addEventListener('mousemove',self.onInputMove,false);

someDom.removeEventListener('mousemove',self.onInputMove,false);
Answer

onInputMove is not an event-callback method. So you need to do something like:

var event = function(ev) {self.onInputMove(ev)};
someDom.addEventListener('mousemove', event,false);

someDom.removeEventListener('mousemove', event, false);
Answer

Why make it yourself so hard, just use the following to bind an event to an element:

element.onmousemove = function(e) {
    // Some code here...
    alert("Mouse moved!");
};

Now, when you want to remove the event, just do this:

element.onmousemove = null;

Done!

Hope this helps you guys out!

Answer

This page comes first on searching this/such issue on Google. So apart from answers already mentioned, here is one more interesting fact for future:

Leaving out the third optional variable in addEventListener() for useCapture/useBubble (as it defaults to false) does create some issue while removing the same eventlistener with same callback name. I faced this issue while working on chrome. Cant say about other browsers.

So do mention the third variable explicitly as "false".

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.