How to prevent mouse move-out from moving into child elements to trigger mouseout and MouseOver events:
The Mouseout and MouseOver events are not covered here, so you can refer to the JavaScript mouseout and MouseOver events section for more details.
The two events have a common feature, that is, when the mouse is moved into or out of the child element will trigger the corresponding event, which is often in practical applications is not necessary, or can bring a lot of trouble, following the example code to explain how to avoid this effect.
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">#box{width:200px;Height:200px;Background-color:Red;padding:50px;}#inner{width:50px;Height:50px;Background-color:Blue;}</style><Scripttype= "Text/javascript"> functionIsmouseleaveorenter (E, handler) {varRELTG=E.relatedtarget?E.relatedtarget:e.type=='mouseout'?e.toelement:e.fromelement; while(RELTG&&RELTG!=handler) {RELTG=Reltg.parentnode; } return(RELTG!=handler); } window.onload=function(){ varBox=document.getElementById ("Box"); varNum=document.getElementById ("Num"); varCount=0; Box.onmouseout=function(EV) {varEV=EV||window.event; if(!Ismouseleaveorenter (Ev,box)) { return false; } num.innerhtml=Count++; }}</Script></Head><Body><DivID= "box"> <DivID= "inner"></Div></Div><Div>The event triggered the<spanID= "num"></span>Times</Div></Body></HTML>
The above code realizes our request, can eliminate the problem that the mouse pointer moves in or moves out the child element, although the example is only mouseout the event, for the MouseOver event is also so, the following describes this code implementation process:
I. Principle of implementation:
When this event is triggered, the event object will have a Relatedtarget property (standard browser support, IE8 and IE8 the following browsers need to return with other properties), it can return a node associated with the event target node, if the returned node is the descendant element of the object registering the event, The description is the event trigger that we are going to eliminate, so just judge if the node returned by Relatedtarget is a descendant node, you can do it with special treatment, see code comments.
two. Code comments:
1.function Ismouseleaveorenter (E, handler) {}, this function is the core of functionality and can return a Boolean value used to identify whether the Relatedtarget property returns a descendant node, if True indicates that it is not a descendant node, If False, it is a descendant node. The first parameter is the event object, and the second is the object that registers the event handler function.
2.var RELTG = e.relatedtarget? E.relatedtarget:e.type = = ' Mouseout '? E.toelement:e.fromelement, returns the event association object, and related properties can be found in related readings.
3.while (RELTG && RELTG! = handler) {RELTG = Reltg.parentnode}, a while loop condition: If the RELTG exists and is not the node that is currently registering the event, if the condition is not met, Then the parent node of the RELTG will be fetched and then assigned to RELTG, which repeats itself. The purpose of this statement is to determine whether the relevant elements are descendants of the elements, if so, there will always be a reltg.parentnode and handler the same.
4.return (RELTG! = handler), returns a Boolean value that returns False if the same is true if it is not the same.
three. Related reading:
1.relatedTarget properties can be found inRelatedtarget Event properties for JavaScriptA chapter.
The 2.e.type property can be found inthe Type event property of JavaScriptA chapter.
The 3.e.toelement property can be found inToelement Event properties for JavaScriptA chapter.
The 4.e.fromelement property can be found inFromelement Event properties for JavaScriptA chapter.
5.parentNode refer toJS How elements of the current element are all parent elementsA chapter.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=10649
For more information, refer to: http://www.softwhy.com/javascript/
How to prevent mouse move-out from moving into child elements triggering mouseout and mouseover events
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
