[解決済み】absoluteの親divの子要素をホバーしたときのonmouseoutをjQueryなしで防止する。

質問

で困っています。 onmouseout 関数は、絶対位置決めされた div の中で使用されます。マウスが div 内の子要素に当たったときに mouseout イベントが発生しますが、マウスが親の absolute div から出るまで発生させたくありません。

どうすれば mouseout イベントは、子要素に当たったときに、jquery なしで発生します。

私はこれがイベントバブリングと関係があることを知っているが、私はこれを解決する方法を見つけるのに苦労している。

ここに似たような投稿がありました。 子要素で発生するマウスアウトイベントを無効化するには？

しかし、その解決策はjQueryを使用しています。

解決方法は？

function onMouseOut(event) {
        //this is the original element the event handler was assigned to
        var e = event.toElement || event.relatedTarget;
        if (e.parentNode == this || e == this) {
           return;
        }
    alert('MouseOut');
    // handle mouse event here!
}



document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);

必要なCSSとHTMLを含むJsFiddleの簡単なデモを作りましたので、ご覧ください...

EDIT クロスブラウザ対応のためにリンクを修正しました。 http://jsfiddle.net/RH3tA/9/

ノート これは直接の親をチェックするだけで、親 div がネストした子要素を持っている場合は、何らかの方法でその親要素を走査して "Orginal element" を探さなければならないことに注意してください。

EDIT ネストした子供の例

EDIT クロスブラウザに対応するように修正しました。

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

//using closure to cache all child elements
var parent = document.getElementById("parent");
parent.addEventListener('mouseout',makeMouseOutFn(parent),true);

//quick and dirty DFS children traversal, 
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;
}

そして、新しい JSFiddle , EDIT 更新リンク