How to detach event in IE 6 7 8 9 using JavaScript

Question

This is a partial code, not the full version.

I have a highlighter that highlights a specific html element when the mouse hovers.

I also have a click event and listener.

My problem is : the highlighter event/listener does not detach when using Internet Explorer v6 v7 v8 v9

What am I doing wrong?

This is how I attach the event and start the event listener:

if (document.body.addEventListener) {
                        //alert(11);
                        document.body.addEventListener('mousemove', handler, false);
                    } else if (document.body.attachEvent) {
                        //alert(12);
                        var ff=function(e) {
                            return handler(e || window.event);
                        };
                        //alert(ff);
                        document.body.attachEvent('onmousemove', ff);
                    } else {
                        //alert(13);
                        document.body.onmousemove = handler;
                    }

This is how I stop the onmousemove/mouse event/listener :

if (document.body.removeEventListener) {
                    document.body.removeEventListener('mousemove', handler, false);
                } else if (document.body.detachEvent) {
                    document.body.detachEvent('onmousemove', function(e) {
                        return handler(e || window.event);
                    });
                } else {
                    document.body.removeAttribute("onmousemove");
                }

This is how I stop the onclick/click event/listener:

if (document.body.removeEventListener) {
                    document.body.removeEventListener('click', ClosetAffairHighlighter.highlightClick, false);
                } else if (document.body.detachEvent) {
                    document.body.detachEvent('onclick', ClosetAffairHighlighter.highlightClick);
                } else {
                    document.body.removeAttribute("onclick");
                }

score 14 · Accepted Answer · answered Oct 18 '12 at 07:52

base on this article, a cross-browser event handler can be :

var EventUtil = {
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    removeHandler: function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }
};

Rats, this NCZ link is no longer active, is there an alternative article or link that could be referred to? — danjah, Jul 07 '14 at 23:40
@Danjah Thanks for reminding, this gist: https://gist.github.com/objectfoo/4144898 is a repository for the code. — Chris Li, Jul 11 '14 at 10:10

score 2 · Answer 2 · answered Oct 18 '12 at 07:48

You need to pass to detachEvent the function you added with attachEvent. In your code you're passing a new one (they have the same toString() and would do the same thing but they're not the same).

You should make ff global with

var ff;
if (document.body.addEventListener) {
    document.body.addEventListener('mousemove', handler, false);
} else if (document.body.attachEvent) {
     ff=function(e) {
          return handler(e || window.event);
     };

and then call

else if (document.body.detachEvent) {
     document.body.detachEvent('onmousemove', ff);
}

to remove the listener in old IE.

Note : I'm really doubtful about the document.body.removeAttribute("onclick"); : is there really a case in which this would be useful ?

i will have this tryed ... 10x – Ionut Flavius Pogacian Oct 18 '12 at 07:49 — Ionut Flavius Pogacian, Oct 18 '12 at 07:49

How to detach event in IE 6 7 8 9 using JavaScript

2 Answers2

Linked