Home > Developer > Web Develop
The bubbling event is a click on the child node, which triggers the parent node, the ancestor node's click event. In our usual development process, we will certainly encounter a div (this div can be an element) wrapping a div, but, in these two Div added events, if you click inside the div we want to deal with this Div event, but, We don't want the outer div's event to be executed, which is what we're going to use to stop bubbling.
Popular point, you watch TV at home, hiding in your own small room, but you do not want to sound to the next door parents ' ears, at this time, you may hide in bed, or wall sound insulation is very good, blocking the sound can be understood to prevent bubbling.
<style> #content { width:140px; BORDER:1PX solid blue; } #msg { width:100px; height:100px; margin:20px; border:1px solid red; } </style>
<body>
<div id= "Content" >
Outer DIV
<div id= "MSG" >
Inner Div
</div>
</div>
</body>
Show results
The corresponding jquery code is as follows:
<script type= "Text/javascript" src= "js/jquery-1.8.3.js" ></script> <script type= "text/ JavaScript > $ (function () { //for inner div binding Click event $ ("#msg"). Click (function () { alert ("I am a small div"); }); //For the outer div element to bind the Click event $ ("#content"). Click (function () { alert ("I am the Big div"); }); Binds the Click event $ ("body") for the BODY element. Click (function () { alert ("I Am Body") ;}); </script>When you click a small div, it triggers a large div and body click event. Clicking on a large div triggers the body's Click event.
How do you prevent this bubbling event from happening?
Modify the following:
<script type= "Text/javascript" src= "js/jquery-1.8.3.js" ></script> <script type= "text/ JavaScript > $ (function () { //for inner div binding Click event $ ("#msg"). Click (Function (event) { alert ("I am a small div "); Event.stoppropagation (); block event bubbling }); Bind the Click event $ ("#content") for the outer div element. Click (function (event) { alert ("I am the Big div"); Event.stoppropagation (); block event bubbling }); Binds the Click event $ ("body") for the BODY element. Click (function (event) { alert ("I am Body"); Event.stoppropagation (); block event bubbling }); Event.stoppropagation (); Block event bubbling
Sometimes clicking the Submit button will have some default events. For example, jump to another interface. However, if you do not pass the verification, you should not jump. This can be done by setting the Event.preventdefault (); Block default behavior (form submission).
HTML section:
<body> <form action= "test.html" > user name: <input type= "text" id= "username"/> <br/> <input type= "Submit" value= "Commit" id= "sub"/> </form> </body>
<script type= "Text/javascript" src= "js/jquery-1.8.3.js" ></script> <script type= "text/ JavaScript > $ (function () { $ ("#sub"). Click (Function (event) { //Gets the value of the element, the Val () method returns or sets the value of the selected element. var username = $ ("#username"). Val (); Determine if the value is empty if (username== "") { //Hint message //alert ("The value of the text box cannot be empty"); $ ("#msg"). HTML ("The value of the <p> text box cannot be null .</p>"); Block default behavior (form submission) event.preventdefault ();} ); }); </script>
All right, so much for writing! Or novice, a lot of guidance.jquery Blocking Event bubbling
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
