How jquery prevents child elements from corresponding mouseout events

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.