Bubble event is to click on the child node, will trigger the parent node up, ancestor node Click event.
We are in peacetime development process, will certainly encounter in a div (this div can be elements) parcel a div situation, but then, in these two div have added events, if click on the div inside we want to deal with this Div event, but then, We don't want the outer div event to execute, and we're going to use block 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 in the ears of parents, at this time, you may hide in bed, or the walls of sound insulation effect is good, blocking sound can be understood to prevent bubbles.
<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 () {
/) is the Inner div binding Click event
$ (" #msg "). Click (function () {
alert (" I am a small div ");
});
//Bind click event
$ ("#content") for the outer div element. Click (function () {
alert ("I am a large div");
};
Bind Click event
$ ("body") for the BODY element. Click (function () {
alert ("I am Body");
}
); </script>
When clicked small Div, will trigger the big div and body's Click event. Clicking on the large div triggers the body's Click event.
How do you prevent this bubbling event from happening?
Modified as follows:
event.stopPropagation(); // 阻止事件冒泡
Sometimes clicking the Submit button will have some default events. For example, jump to another interface. But if you do not pass validation, you should not jump. This can be done by setting up Event.preventdefault (); Block default behavior (form submission).
HTML section
<body> <form action= "test.html" > username: <input type= "text" id= "username"/> <br/> <input type= "Submit" value= "submitted" 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) {
//Get the value of an element, Val () method returns or sets the value of the selected element.
var username = $ ("#username"). Val ();
Determines whether the value is an empty
if (username== "") {
//hint information
//alert ("The value of the text box cannot be null");
$ ("#msg"). HTML ("<p> text box value cannot be empty .</p>");
Block default behavior (form submission)
Event.preventdefault ()
;}}); </script>
Block default behavior (form submission)
Event.preventdefault ();
another way to prevent the default behavior is to return false. Effect.
The code is as follows:
<script type= "Text/javascript" src= "js/jquery-1.8.3.js" ></script>
<script type= "text/" JavaScript ">
$ (function () {
$ (" #sub "). Click (Function (event) {
//Get the value of an element, Val () method returns or sets the value of the selected element.
var username = $ ("#username"). Val ();
Determines whether the value is an empty
if (username== "") {
//hint information
//alert ("The value of the text box cannot be null");
$ ("#msg"). HTML ("<p> text box value cannot be empty .</p>");
Block default behavior (form submission)
//event.preventdefault ();
return false;
}}); </script>
Similarly, the bubbling event above can also be handled by return false.
<script type= "Text/javascript" src= "js/jquery-1.8.3.js" ></script>
<script type= "text/" JavaScript ">
$ (function () {
/) is the Inner div binding Click event
$ (" #msg "). Click (Function (event) {
alert (" I am a little div ");
Event.stoppropagation (); Block event bubbling return
false;
};
Binds the Click event
$ ("#content") for the outer div element. Click (function (event) {
alert ("I am a large div");
Event.stoppropagation (); Block event bubbling return
false;
};
Bind Click event
$ ("body") for the BODY element. Click (function (event) {
alert ("I am Body");
Event.stoppropagation (); Block event bubbling return
false;});
The above is the entire content of this article, I hope to help you, but also hope that a lot of support cloud Habitat community!
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
