Solution to the problem that the onmouse event in javascript fails in div_javascript skills

In other words, moving to a sub-object of the object is also considered onmouseout. But this often fails to achieve the desired effect we want. This is due to the bubbling characteristics of JavaScript itself (that is, an event is triggered on the child element and bubbles to the parent element - stack last-in-first-out algorithm). I searched online today and found the following solution (compatible with IE and Firefox).
It is very simple to solve the problem under IE. Just use onMouseEnter and onMouseLeave instead of onMouseOver and onMouseOut. Their functions are basically the same, but the former will not bubble (if you use jQuery's event event, just bind mouseleave and mouseenter That’s it). But there are no onMouseEnter and onMouseLeave events under firefox. Then you can only use pure js to solve the compatibility problem of IE and Firefox:
Principle: After the onMouseOut event is triggered, it is judged whether the element reached by the mouse is included in the parent element information bar (div). If so, it means If the mouse is still on the information bar (div), it will not be hidden. If not, it means that the mouse has really moved out of the information bar (div), then the information bar will be hidden.

Copy code The code is as follows:

// First, get the element that triggers the onMouseOut event, IE Under Firefox, it is obtained through the toElement attribute of the event. Under Firefox, it is obtained through the relatedTarget attribute of the event.
IE: event.toElement, Firefox: event.relatedTarget (Note: The event under Firefox must be passed in when the function is called, while the event under IE can be obtained directly through the window.event system object)
// ① The next step is to determine whether the obtained element is a child element of the main div (under IE, you can determine through the obj.contains(element) method of the element, but there is no such method under Firefox, so you need to define the obj. of the element for Firefox. contains() method).
The code is as follows:
if(typeof(HTMLElement)!="undefined") // Define the contains() method for firefox. IE already has this method in the system
{
HTMLElement.prototype .contains=function(obj) {
while(obj!=null&&typeof(obj.tagName)!="undefind") { // Use loop comparison to determine whether it is the parent element of obj
　 if(obj== this) { return true; }
　obj=obj.parentNode;
　 }
return false;
};
}
// ②After obtaining and judging are done, we can It is processed by judging IE and Firefox, and the browser type is judged by navigator.userAgent:
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
// ③ So far all the problems to be solved have been solved To solve the problem, when the onMouseOut event is triggered, we will first get the element that the mouse reaches for different browsers, and then judge whether the element is within the information bar (div). If the element is a child element, then the onMouseOut event will not be executed, and vice versa. Then execute the event and hide the information bar. The completed code is as follows:
function hideMsgBox(theEvent){ //theEvent is used to pass in events, Firefox’s method
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
}
}
}
/*Operation to be performed (such as: hide)*/
document.getElementById('MsgBox').style.display='none' ;
......
}
// ④ Set onMouseOut=hideMsgBox(event) on the information bar (Div) to call.

In addition, by setting window.event.cancelBubble = true (IE), event.stopPropagation() event.preventDefault() (Firefox) can also solve the problem, but it requires traversing all child elements, which affects Efficiency, so it is more appropriate to make the above judgment and process it separately when the onMouseOut event is triggered.