mouseover and mouseout trigger multiple solutions (ie compatible and firefox) (rpm)

When the mouse move on when the time will be used mouseover and mouseout event triggering event as a condition, but if we do have triggered internal elements of other elements of repeated trigger mouseover and mouseout events, such as flickering and other issues led to the menu . Because the internal elements of the event will be distributed to its parent object move the mouse when it is equivalent to the outside elements also trigger a mouseover event.

In order to prevent repeated trigger mouseover and mouseout, where to use a property of the event object relatedTarget , this attribute is used to determine the attributes associated node mouseover and mouseout event target node. Simply means that when the trigger mouseover event, the one that just left mouse node relatedTarget property represented when the trigger mouseout event it represents that object moves the mouse. Since MSIE does not support this property, but it has replaced attributes, namely fromElement and toElement.

With this property, we can clearly know that our mouse is moved over from which the object is to be moved where. So that we can if we want inside the object that triggered the event by judging the associated object is or is not the object itself. Through this we will be able to determine a reasonable choice if you really want to trigger events.

Here we also used the method to check if an object is contained in another object, contains method. MSIE and FireFox inspection method are provided, where a function package.

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 inside our trigger object.

Here is our focus, and I encapsulates the function checkHover (e, target) to check if a real mouse into or out of the object from the outside, this function need to pass the current event and target objects.

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;
}

Function which used getEvent () function returns the event object is available in MSIE or FF, where you can own package into another function.

Logic function is very simple, first determine the type of event, this is mainly to accommodate MSIE, when the time is mouseover relatedTarget in MSIE should be fromElement, and mouseout it should return toElement, of course, in the following FF easier to handle, are the same property relatedTarget. First, determine whether our relatedTarget inside the target object, and if so returns false if not directly, then it is determined whether the internal target is the object itself, and if so returns false, if neither of the establishment returns true.

Our main job here is done, we have this function during programming time as long as the internal mouseover or mouseout event check first, then the next step will be able to easily achieve the effect hover.

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

Reproduced in: https: //www.cnblogs.com/JoannaQ/p/3887912.html