Crossbrowser onMouseenter

Question

onMouseoverを要素全体とその子に付け加えるのにいくつか問題がありますので、私はマウスの位置に基づいてMicrosoft onMouseenterを見てみることにしました。ブラウザのクロス・ソリューション、または少なくともonMouseoverの修正をdivの子にも適用する必要があります。

P.S.私はこれのためにjQueryや他のフレームワークを使うはずがありません。

アイデアを気に入ってください。

Answer 1

EDIT：ここに私の元のより良い解決策です。代わりにe.relatedTargetをthis.parentNodeに対してテストします。

正確な結果を与えるようだ：

if( e.relatedTarget !== this.parentNode) return; 

例：http://jsfiddle.net/FPKKX/1/

を...ので、あなたがしたい：

el.onmouseover = function(e) { 
    // typical event obj fix 

    if( e.relatedTarget !== this.parentNode) return; 

    // This will only log to the console for the <div> 
    console.log(e.target.tagName, e.relatedTarget.tagName); 
}; 

---

オリジナル

このソリューションは実際には不完全です。内側の要素から離れると外側のイベントが発生するため、要素ごとのトラッキングが必要になります。 mouseenterの動作を複製するテストを行うだけで済みます。

例：http://jsfiddle.net/FPKKX/（コードのコメントを読んで、あなたのコンソールを開く）

el.onmouseover = function(e) { 
    // typical event obj fix 

    // if the event is the result of bubbling, return. 
    if(this !== e.target) return; 

    // rest of code 
}; 

イベントのターゲットは、要素と同じであれば今if()後のコードのみ発動します効果的にイベントのバブリングを効果的にレンダリングします。

これは完全ではありません。コンテナの内側のエッジの1つに直接配置された内側の要素がある場合、イベントを受け取る要素は、マウスがその点に入ると内側の要素になる場合があります。調整が必要になります。

Answer 2

あなたがそのようなjQueryのようライブラリを使用して喜んでいる場合は、クロスブラウザとされているMouseEnterイベントがあります：

http://api.jquery.com/mouseenter/