javascript - mouseout イベントの削除に失敗する

Question

div からマウスアウト イベントを切り離す際に問題があります。このフォーラム (リンク)から機能を引き出しました。その目的は、イベントのバブリングを防ぐことです。それは魅力のように機能しますが、デタッチは失敗します。Ik は、アタッチおよびデタッチするたびにイベント ハンドラを増やし続けます。何時間も試した後...おそらく他の誰かが答えを持っています:-)

私の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>

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;
}

[編集]結局、onclick の削除を何らかの形で妨げたのはバブリングでした。追加する

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

トリックをした