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

The Mouseover and mouseout events are used as conditions for event triggering, however, if another element exists in the trigger element, the Mouseover and mouseout events will be repeatedly triggered when the mouse moves up, such as the problem of menu flashing. Because the internal element will dispatch an event to its parent object when moving the mouse, the external element also triggers the Mouseover event.

To prevent repeated triggering of Mouseover and mouseout, A relatedtarget attribute of the event object is used to determine the attributes of relevant nodes of the target node of the Mouseover and mouseout events. Simply put, when the Mouseover event is triggered, the relatedtarget attribute represents the node that the mouse has just left on behalf of the table. 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, namely 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 {        return !!(parentNode.compareDocumentPosition(childNode) & 16);    }}    

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 in MSIE, while mouseout should return toelement, of course, it is easy to do in FF, all of which are the same attribute relatedtarget. First, judge whether our relatedtarget is inside the target object. If yes, the system returns false. If not, the system checks whether the target object is itself. If yes, the system returns false, if neither of the preceding conditions is true, the returned result is 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)){         //do someting...    }}myElement.onmouseout=function(e){    if(checkHover(e,this)){        //do someting...    }}

Reprinted from: http://www.cnblogs.com/shaojun/archive/2011/03/16/1986249.html