After testing, we found that the jitter of Example 1 in ff is severe, and that in ie is a little bit. The specific cause is actually caused by the bubble mechanism of mouseout. Http://www.cssrain.cn href = "http://www.cssrain.cn/attachments/month_0807/f2008715193530.jpg" rel = lightbox>
In IE, there are onmouseenter and onmouseleave.
Unfortunately, ff does not. I want to explain again, why does ff not reference such a good function?
There is also onpropertychange in ie, ah, ff, none...
A js section is introduced in the comparison example to be compatible with FF's onmouseenter and onmouseleave .:
The Code is as follows:
Var xb =
{
EvtHash: [],
IeGetUniqueID: function (_ elem)
{
If (_ elem = window) {return 'thewindow ';}
Else if (_ elem = document) {return 'thedocument ';}
Else {return _ elem. uniqueID ;}
},
AddEvent: function (_ elem, _ evtName, _ fn, _ useCapture)
{
If (typeof _ elem. addEventListener! = 'Undefined ')
{
If (_ evtName = 'mouseenter ')
{_ Elem. addEventListener ('mouseover', xb. mouseEnter (_ fn), _ useCapture );}
Else if (_ evtName = 'mouseleave ')
{_ Elem. addEventListener ('mouseout', xb. mouseEnter (_ fn), _ useCapture );}
Else
{_ Elem. addEventListener (_ evtName, _ fn, _ useCapture );}
}
Else if (typeof _ elem. attachEvent! = 'Undefined ')
{
Var key = '{FNKEY: obj _' + xb. ieGetUniqueID (_ elem) + ': evt _' + _ evtName + ': fn _' + _ fn + '}';
Var f = xb. evtHash [key];
If (typeof f! = 'Undefined ')
{Return ;}
F = function ()
{
_ Fn. call (_ elem );
};
Xb. evtHash [key] = f;
_ Elem. attachEvent ('on' + _ evtName, f );
// Attach unload event to the window to clean up possibly IE memory leaks
Window. attachEvent ('onunload', function ()
{
_ Elem. detachEvent ('on' + _ evtName, f );
});
Key = null;
// F = null;/* DON't null this out, or we won't be able to detach it */
}
Else
{_ Elem ['on' + _ evtName] = _ fn ;}
},
RemoveEvent: function (_ elem, _ evtName, _ fn, _ useCapture)
{
If (typeof _ elem. removeEventListener! = 'Undefined ')
{_ Elem. removeEventListener (_ evtName, _ fn, _ useCapture );}
Else if (typeof _ elem. detachEvent! = 'Undefined ')
{
Var key = '{FNKEY: obj _' + xb. ieGetUniqueID (_ elem) + ': evt' + _ evtName +': fn _ '+ _ fn + '}';
Var f = xb. evtHash [key];
If (typeof f! = 'Undefined ')
{
_ Elem. detachEvent ('on' + _ evtName, f );
Delete xb. evtHash [key];
}
Key = null;
// F = null;/* DON't null this out, or we won't be able to detach it */
}
},
MouseEnter: function (_ pFn)
{
Return function (_ evt)
{
Var relTarget = _ evt. relatedTarget;
If (this = relTarget | xb. isAChildOf (this, relTarget ))
{Return ;}
_ PFn. call (this, _ evt );
}
},
IsAChildOf: function (_ parent, _ child)
{
If (_ parent ==_child) {return false };
While (_ child & _ child! = _ Parent)
{_ Child = _ child. parentNode ;}
Return _ child = _ parent;
}
};
This article from cssrain.cn Original article link: http://www.cssrain.cn/article.asp? Id = 952