removing mouseout event fails

Question

I have a problem detatching a mouseout event from a div. I pulled the function from this forum (link). Its purpose is to prevent event-bubbling. It works like a charm, but detatching fails. Ik keeps multiplying the eventhandlers every time I attach and detach. After hours of trying... maybe someone else has the answer :-)

my HTML:

<div id="dd_301" onclick="dd_show(this,301)">
    <span id="sel_301">selected item</span>
    <div id="sel_A301" style="display:none">
        <div id="sel_B3010" onclick="dd_click(this,1)">option 1</div>
        <div id="sel_B3011" onclick="dd_click(this,2)">option 2</div>
    </div>
</div>

the javascript:

function dd_show(p, i) {
    getObj('sel_A' + i).style.display = 'block';
    addEvent(p, 'mouseout', makeMouseOutFn(p));
}

function dd_remove(o) {
    removeEvent(o,'mouseout',makeMouseOutFn);
    o.getElementsByTagName('div')[0].style.display = 'none';
}

function dd_click(o,i){
   var p=o.parentNode.parentNode;
   dd_remove(o);
   }

function addEvent(elem, ev, fn) {
    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return (ret);
    }

    function attachHandler() {
        var ret = fn.call(elem, window.ev);
        if (ret === false) {
            window.ev.returnValue = false;
            window.ev.cancelBubble = true;
        }
        return (ret);
    }
    if (elem.addEventListener) {
        elem.addEventListener(ev, listenHandler, false);
    } else {
        elem.attachEvent("on" + ev, attachHandler);
    }
}

function removeEvent(o, ev, fn) {
    if (o.removeEventListener) {
        o.removeEventListener(ev, fn, false);
    } else {
        if (o.detachEvent) {
            o.detachEvent(ev, fn);
        }
    }
}

function makeMouseOutFn(elem) {
    var list = traverseChildren(elem);
    return function onMouseOut(event) {
        var e = event.toElement || event.relatedTarget;
        if ( !! ~list.indexOf(e)) {
            return;
        }
        alert('MouseOut');
    };
}

function traverseChildren(elem) {
    var children = [];
    var q = [];
    q.push(elem);
    while (q.length > 0) {
        var elem = q.pop();
        children.push(elem);
        pushAll(elem.children);
    }

    function pushAll(elemArray) {
        for (var i = 0; i < elemArray.length; i++) {
            q.push(elemArray[i]);
        }
    }
    return children;
}

[EDIT] In the end, it was the bubbling that somehow prevented the removal of the onclick. Adding

if('bubbles' in event){if(event.bubbles){event.stopPropagation();}}else{event.cancelBubble=true;}

did the trick