Home > Developer > Web Develop
In JavaScript, the parent element contains child elements:
When the parent sets onmouseover and onmouseout, the mouse moves from the parent to the child, triggering the onmouseout of the parent and then triggering the onmouseover- , onmouseover is triggered after the parent's oumouseout is triggered again after the parent is moved from the child. And if the onmouseover within the application of the timer, there will be a large problem. Here's a solution for this problem.
First, before giving a solution, you must first clarify several objects and methods, as follows:
1. Event Object
2, Event object related attributes (only for onmouseover and onmouseout), namely Fromelement, Toelement, Relatedtarget
3. The method of determining whether an element contains another element, that is, element.contains (node) and element.comparedocumentposition (node)
Now that we've talked about how to figure out the objects and methods, we can analyze how the bottom is going to solve the problem.
Analysis:
The problem is that when you set up onmouseover, when the mouse is moved into the parent, there is no problem, but when the parent moves into the child, and when children are called out to the parent, the problem arises, so we can find a way to set the trigger object to expire when the mouse moves from parent to child, or from child to parent. We can judge by the IF statement. There is a property in the event object that can be used to get the object to move in and out, as described below.
1, Event object: You can get a series of properties of the event object, write a parameter in the event, can be obtained by parameters, the method is as follows:
1 function (e) {2 e = window.event | | e; // window.event is for the purpose of obtaining event objects under IE, and E is directly accessible to standard browsers. 3 }2. Related objects of event object
When triggering onmouseover and onmouseout, it is bound to involve other objects, such as: onmouseover related objects, which object is entered. The onMouseOut object is the object to which to enter. Here's how to get it:
1Wrap.onmouseover =function(e) {2E = Window.event | |e;3 vars = e.fromelement | | E.relatedtarget;//e.fromelement for IE under onmouseover get related object method, Relatedtarget for the standard browser to get the method4 }5Wrap.onmouseout =function(e) {6E = Window.event | |e;7 vars = e.toelement | | E.relatedtarget;//e.toelementie onmouseout Get Related object method, Relatedtarget to get method under standard browser8}
3. Determine if an element contains another element
Under IE, you can use A.contains (b) to determine if a contains B
Standard browser a.comparedocumentposition (b) has 5 values, if 0 is the same node, if 2 means a at the back of B, if 4 means a is in front of B, if 10 for a is a descendant of B, if 20 represents a is the ancestor of B.
The HTML and CSS for the example we're going to use first
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <styletype= "Text/css">6 Html,body,div{margin:0;padding:0}7 . Wrapper{8 Overflow:Hidden;9 width:800px;Ten background:Black; One } A . Box{ - Height:200px; - background:#FF0; the margin:80px 0; - } - </style> - </Head> + <Body> - <Divclass= "wrapper"ID= "Wrap"> + <Divclass= "box"ID= "box"></Div> A </Div> at </Body> - </HTML>
Now that we know the necessary methods for acquiring attributes and events, we can think of ways to solve the problem.
When onmouseover is triggered, it may be that it is moved from outside the object, it is possible that the parent is moved into the child, and the child is moved out to the parent, and just now said that the related object of onmouseover is the object from which to get into. If it's coming from an outside object, we'll execute the required code. If it is moved from the parent to the child or to the parent, it is skipped directly.
The parent is moved into the child object, and the related object is the parent. The child is moved out to the parent object, and the relative object is a child.
The code is as follows:
1Wrap.onmouseover =function(e) {2E = Window.event | |e;3 vars = e.fromelement | |E.relatedtarget;4 if(document.all) {//determine if the browser is IE, ie if there is document.all5 if(! This. Contains (s)) {//determines whether the object that invokes onmouseover (this) contains itself or a child and does not execute if it contains6Console.log (' IE'll over ');7 } 8}Else{//methods under the standard browser9 varReg = This. Comparedocumentposition (s);Ten if(! (reg = = | | reg = = 0)) { OneConsole.log (' Browser'll over '); A } - } -}
When onmouseout is triggered, it may be moved from the parent to the child, or it may be moved to the parent or moved out of the parent.
The parent is called the child, the related object is a child, and the child is called the parent, and the related object is the parent.
The code is as follows:
1Wrap.onmouseout =function(e) {2E = Window.event | |e;3 vars = e.toelement | |E.relatedtarget;4 if(document.all) {5 if(! This. Contains (s)) {6Console.log (' IE'll out ');7 }8}Else {9 varReg = This. Comparedocumentposition (s);Ten if(! (reg = = | | reg = = 0)) { OneConsole.log (' Browser'll out '); A } - } -}
The problem has been solved.
But you will find that onmouseover and onmouseout are judged in the same way. So we get:
The code does not execute, whether it is moved in or out, as long as the related object is outside the parent.
Finally, to provide you with my own write compatible code, copied to the JS code can be directly called. The code is as follows:
1 /* 2 * Function: Mouse in Object trigger event, compatible with all browsers and prevent the mouse from moving between parent and child objects caused by triggering onmouseover bug3 * Parameters: The first parameter represents the triggered object, the second parameter represents the event object of the triggered object, and the third object represents the function to be executed4 * http://fuckhtml5.blog.163.com/5 */6 functionMouseOver (A, E, func) {7E = e | |window.event;8 varb = E.fromelement | |E.relatedtarget;9 Ten Mouseoverandout (A, B, func); One } A /* - * Function: Mouse out object trigger event, compatible with all browsers and prevent mouse from moving between parent and child objects caused by onmouseout bug - * Parameters: The first parameter represents the triggered object, the second parameter represents the event object of the triggered object, and the third object represents the function to be executed the * http://fuckhtml5.blog.163.com/ - */ - functionMouseout (A, E, func) { -E = e | |window.event; + varb = E.toelement | |E.relatedtarget; - Mouseoverandout (A, B, func); + } A /* at * Function: Mouse move in or out of Object trigger event, compatible with all browsers and prevent mouse from moving between parent and child objects caused by onmouseover & onmouseout Bug - * Parameters: The first parameter represents the triggered object, the second parameter represents the event object of the triggered object, and the third object represents the function to be executed - * http://fuckhtml5.blog.163.com/ - */ - functionMouseoverorout (A, E, func) { -E = e | |window.event; in varb; - if(E.type = = ' MouseOver ') { tob = E.fromelement | |E.relatedtarget; +}Else if(E.type = = ' Mouseout ') { -b = E.toelement | |E.relatedtarget; the } * Mouseoverandout (A, E, func); $ }Panax Notoginseng /* - * Function: Mouse move in or out of Object trigger event, compatible with all browsers and prevent mouse from moving between parent and child objects caused by onmouseover & onmouseout Bug the * Parameters: The first parameter represents the object being triggered, the second parameter represents the object that is fired, and the third object represents the function to be executed + * http://fuckhtml5.blog.163.com/ A */ the functionMouseoverandout (A, B, func) { + if(document.all) { - if(!(A.contains (b))) { $ func (); $ } -}Else { - varres =A.comparedocumentposition (b); the if(! (res = = | | res = = 0)){ - func ();Wuyi } the } -}
(If it is onmouseover, call MouseOver (A, E, func), and if it is onmouseout, call Mouseout (A, E, func) to Either onmouseover or onmouseout calls Mouseoverorout (A, E, func) directly. ）
Above for personal experience, if there is no place also please leave a message pointing.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
