イベント伝播の混乱

Question

私は、別の要素にネストされた要素を持っています。私は、外部要素に登録されたmouseoverイベントを持っています。私のマウスが外側の要素に入ったときと内側の要素に入ったときの両方で起動します。内側の要素でイベントの発生をオフにするにはどうすればよいですか？

Answer 1

イベントはオブジェクトに発生し、DOMツリーをバブルアップします。しかし、あなたはevent.stopPropagation()でバブリングを止めることができます。これは、標準に準拠したブラウザでのみ機能します（IEの最新バージョンを除くすべてのブラウザで動作するわけではありません）。

innerElement.addEventListener('mouseover', function (event) { 
    event.stopPropagation(); 
}, false); 

IEのバージョンは次のようになります。だから、全く

innerElement.attachEvent('onmouseover', function() { 
    window.event.cancelBubble = true; 
}); 

：あなたはjQueryのを（使用している場合、それは提供しています）

el.onmouseover = function(e) { 
    //normalize event object to avoid cross browser inconsistencies 
    e = e || window.event; 

    //grab target element from which event is originated 
    var target = e.target || e.srcElement; 

    if (target === el) { 
    //do something here 
    } 
}; 

：ここ

function listener(event) { 
    event = event || window.event; 
    if (event.stopPropagation) { 
     event.stopPropagation(); 
    } else { 
     event.cancelBubble = true; 
    } 
} 
if (innerElement.addEventListener) { 
    innerElement.addEventListener('mouseover', listener, false); 
} else { 
    innerElement.attachEvent('onmouseover', listener); 
} 

Answer 2

オフにすることはできませんが、ハンドラーは常にevent.target（またはIEのevent.srcElement）をチェックして正しいハンドラーに関係していることを確認できます。

また、内部要素にハンドラを追加し、イベントオブジェクトに対して "stopPropagation（）"を呼び出させることもできます。

Answer 3

は可能な解決策でありますそのような問題を処理する素晴らしい.hover（）イベントあなたのための手綱。