非 IE ブラウザ用の MouseEnter および MouseLeave イベントの実装コードを追加_JavaScript スキル

まず、いくつかのイベント オブジェクトの属性を理解します。

ターゲット は、ネストされた要素の最も内側のレベルにある要素をクリックすると、その要素がターゲットになります。 IE6/7/8はsrcElementに対応します。

currentTarget は、イベント ハンドラーが追加される要素自体を指します。たとえば、el.addEventListener では、el は currentTarget です。 IE6/7/8 には対応する属性がありません。代わりに、evt.currentTarget = this などのハンドラーでこれを使用できます。

relativeTarget はイベント関連の要素を指し、通常はマウスオーバー イベントとマウスアウト イベントで使用されます。 IE6/7/8 で対応するのは fromElement と toElement です。
mouseenter、mouseleave は IE9 でも引き続きサポートされています。Greg Reimer のブログ投稿 さようならマウスオーバー、こんにちはマウスエンター も参照してください。
mouseenterとmouseoverの違いは、要素内を移動するときにmouseenterがトリガーされないことです。次のように

コードをコピーします コードは次のとおりです。

title>mouseerter と Mouseover の違い (IE でテスト)

1、マウスは div 内に移動します[id=parent1] マウスオーバー イベントもトリガーされます

Child11

Child12

div>

マウスが div[id=parent2]

Child22

>
わかりました これら 3 つの属性の意味を理解したら、実装は簡単です:




コードをコピーします


コードは次のとおりです。


E = function(){
function elContains(a, b){

try{
return a.contains a != b && a.contains ? (b) : !!(a.compareDocumentPosition (b) & 16);
}catch(e){}

} function addEvt(el, type, fn){ function fun( e){ var a = e .currentTarget, b = e.popularTarget; if(!elContains(a, b) && a!=b){ fn.call(e.currentTarget,e ); }

}

if(el.addEventListener){
if(type=='mouseenter'){
el.addEventListener('mouseover', fun, false); 🎜>}else if(type=='mouseleave'){
el.addEventListener('mouseout', fun, false);
}else{
el.addEventListener(type, fn, false);
}
}else{
el.attachEvent('on' type, fn);
}
}
return {addEvt:addEvt}();


テストコード:







mouseerter と Mouseover の違い (IE でテスト済み)

1、マウスが div[id=parent1]

内に移動すると、mouseover イベントもトリガーされます。

子供11

子供12

2、マウスが div[id=parent2] 内に移動しても、mouseenter イベントはトリガーされません

子供21

子供22

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]