Home > Developer > Web Develop
How jquery prevents child elements from corresponding Mouseout events:
Mouseout has a feature, when the mouse moved into the child element, it will also trigger this event, but in the actual application of this feature is often not what we want, the following is a code example to introduce how to achieve this effect, code examples are as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">#father{width:100px;Height:100px;background:Red;}#inner{width:50px;Height:50px;background:Green;}</style><Scripttype= "Text/javascript"src= "Mytest/jquery/jquery-1.8.3.js"></Script><Scripttype= "Text/javascript">$ (document). Ready (function(){ $("#father"). Mouseout (function(e) {evt=window.event||e; varobj=evt.toelement||Evt.relatedtarget; varPA= This; if(Pa.contains (obj))return false; $( This). Hide (); }); })</Script></Head><Body><DivID= "Father"> <DivID= "inner"></Div></Div></Body></HTML>
The above code implements our requirements, when the mouse pointer moves into the Sub Div, does not trigger the event, but when the mouse moves out of the parent Div will trigger the event, followed by a sweep of the process to achieve this effect.
I. Principle of implementation:
the principle is very simple, is to judge when the mouse pointer moves, to determine whether the node associated with the target node is a child element, if it is a child element, the event is not triggered, if not the child element triggers the event.
two. Related reading:
The 1.mouseout event can be found in the Mouseout event section of jquery .
2.evt = window.event| | E can refer to var ev=window.event| | What is the role of EV as a chapter.
the 3.toElement properties can be found in the Toelement event Properties section of JavaScript .
the 4.relatedTarget properties can be found in the Relatedtarget event Properties section of JavaScript .
5.this refer to the chapter in this usage of JavaScript .
The 6.contains () function can be found in the jquery.contains () method section.
the 7.hide () function can be found in the section of the Hide () method of jquery .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=11377
For more information, refer to: http://www.softwhy.com/jquery/
How jquery blocks child elements from corresponding Mouseout 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
