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

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

WBOY

リリース： 2016-05-16 18:05:35

オリジナル

1134 人が閲覧しました

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

ターゲット は、ネストされた要素の最も内側のレベルにある要素をクリックすると、その要素がターゲットになります。 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[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 でテスト済み)