Solutions for multiple Mouseover and mouseout triggering (compatible with IE and Firefox)

Address: http://litib.tk/2010/08/mouseover%E5%92%8Cmouseout%E5%A4%9A%E6%AC%A1%E8%A7%A6%E5%8F%91%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95/

The Mouseover and mouseout events are used as conditions for event triggering. However, if other elements are used to trigger an event, the mouse moves over and over again.
To trigger the Mouseover and mouseout events. Because the internal element will dispatch an event to its parent object when moving the mouse, the external element also triggers Mouseover.
Event. 

To prevent repeated triggering of Mouseover and mouseout, A relatedtarget attribute of the event object is used to determine
Attributes of the relevant node of the target node of the Mouseover and mouseout events. To put it simply, when the Mouseover event is triggered, the relatedtarget attribute generation
The table is the node where the mouse has just left. When the mouseout event is triggered, it represents the object where the mouse moves. MSIE does not support this attribute, but it has a substitute attribute, which is
Fromelement and toelement.

With this attribute, we can clearly know the object from which the mouse is moved and where it is to be moved. In this way, we can determine whether the associated object is inside the object where the event is to be triggered, or whether it is the object itself. Through this judgment, we can reasonably choose whether the event is to be triggered.

Here we also use a contains method to check whether an object is contained in another object. MSIE and Firefox provide the checking methods respectively. A function is encapsulated here.

  function   contains (parentnode, childnode) {
   If   (parentnode. contains) {
   return   parentnode  ! =   childnode  &  parentnode. contains (childnode); 
}  else  {< br>   return     !!   (parentnode. comparedocumentposition (childnode)  &    16   ); 
}< BR >} 

This function is used to check whether an object is included in our trigger object.

The following is our focus. I encapsulated a function checkhover (E, target) used to check whether the mouse is actually moving from the outside or out of the object ), this function needs to input the current event object and target object.

 Function  Checkhover (E, target ){
  If  (Getevent (e). Type  =  "  Mouseover  "  ){
  Return     !  Contains (target, getevent (e). relatedtarget  | Getevent (e). fromelement)  &&     !  (Getevent (e). relatedtarget  |  Getevent (e). fromelement)  ===  Target );
}  Else  {
  Return     !  Contains (target, getevent (e). relatedtarget  | Getevent (e). toelement)  &&     !  (Getevent (e). relatedtarget  |  Getevent (e). toelement)  ===  Target );
}
}

  Function  Getevent (e ){
  Return  E  |  Window. event;
} 

The getevent () function used in the function is used to return an available event object under MSIE or ff. Here you can encapsulate it into other functions.

The logic of the function is very simple. First, judge the event type. This is mainly to accommodate MSIE. When it is Mouseover, relatedtarget should be
Fromelement, while mouseout should return toelement. Of course, it is easy to do in ff, and it is the same attribute relatedtarget. First, Judge
Checks whether our relatedtarget is inside the target object. If yes, returns false directly. If not, checks whether the target object is itself. If yes, returns false. If two
If none of them are true, the system returns true.

At this point, our main work has been completed. With this function, we only need to check it inside the Mouseover or mouseout event during programming, then proceed to the next step to easily implement the hover effect.

Myelement. onmouseover=Function(E ){
If(Checkhover (E,This)){
DoSometing...
}
}
Myelement. onmouseout=Function(E ){
If(Checkhover (E,This)){
DoSometing...
}
}