In other words, moving to the object's child object is also onmouseout. But that often does not reach the desired effect we want. This is due to the bubbling characteristics of the JavaScript itself (that is, triggering an event on a child element and bubbling to the parent element-the stack LIFO algorithm). Today I searched the Internet and found the following solutions (IE and Firefox compatible).
In IE to solve the problem is very simple, with Onmouseenter, OnMouseLeave to replace the onmouseover, onmouseout on the line, their role is basically the same, but the former will not occur bubble (if the event with jquery, As long as the binding mouseleave, MouseEnter can be. But Firefox does not have Onmouseenter, onmouseleave these two events. Then only use pure JS to solve the compatibility of IE and Firefox:
Principle: By judging the trigger onmouseout event, the mouse to reach the element is not included in the parent element Information Bar (DIV), if it means that the mouse is still in the InfoBar (DIV), it is not hidden. If it means that the mouse really moved out of the Information Bar (DIV), then the Information Bar will be hidden.
Copy Code code as follows:
First to get the elements that trigger the onmouseout event, ie under the event toelement properties to obtain, Firefox under the event of the Relatedtarget properties to obtain.
IE:event.toElement, Firefox:event.relatedTarget (Note: Firefox event must be passed through the function call, and the event under IE can be obtained directly through the Window.event system object)
① Next is to determine whether the acquisition element is the main div of the child elements (ie can be determined by the elements of the Obj.contains (element) method, but Firefox does not have this method, so you need to define the elements of Firefox obj.contains () method).
The code is as follows:
if (typeof (HtmlElement)!= "undefined")//to Firefox to define the contains () method, IE has been the system itself with this method
{
Htmlelement.prototype.contains=function (obj) {
while (obj!=null&&typeof (obj.tagname)!= "Undefind") {//the parent element of obj is judged by circular contrast
if (obj==this) {return true;}
Obj=obj.parentnode;
}
return false;
};
}
After ② acquisition and judgment is done, we can judge the browser type by using the navigator.useragent to judge IE and Firefox for processing:
if (Navigator.userAgent.indexOf ("MSIE") >0) {
return "MSIE";
}
if (Navigator.userAgent.indexOf ("Firefox") >0) {
return "Firefox";
}
③ so far all the problems to solve are resolved, when the onmouseout event is triggered, we will first get the mouse to the different browser elements, and then by determining whether the element in the Information Bar (DIV), if the element is a child, then do not perform the onmouseout event, Instead, execute the event, hide the InfoBar, and complete the following code:
function Hidemsgbox (theevent) {//theevent used to pass events, Firefox's Way
if (theevent) {
var browser=navigator.useragent; Get Browser properties
if (Browser.indexof ("Firefox") >0) {//if it is Firefox
if (document.getElementById (' MsgBox '). Contains (Theevent.relatedtarget)) {//If it is a child element
Return End Function
}
}
if (Browser.indexof ("MSIE") >0) {//if it is IE
if (document.getElementById (' MsgBox '). Contains (event.toelement)) {//If it is a child element
Return End Function
}
}
}
/* Actions to be performed (e.g. hidden) * *
document.getElementById (' MsgBox '). style.display= ' None ';
......
}
④ is invoked on the InfoBar (DIV) by setting Onmouseout=hidemsgbox (event).
In addition, by setting Window.event.cancelBubble = True (IE), Event.stoppropagation () Event.preventdefault () (Firefox) can also solve the problem, However, it is necessary to traverse all the child elements to affect the efficiency, so it is more appropriate to make the above judgment when triggering the onmouseout event.
