Bubble event is to click on the child node, the event will be passed up, and finally triggered the parent node, ancestor node Click event.
HTML code section:
Copy Code code as follows:
<body>
<div id= "Content" >
Outer DIV Element
<span> Inner SPAN element </span>
Outer DIV Element
</div>
<div id= "MSG" ></div>
</body>
The jquery code is as follows:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
$ (' span '). BIND ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p> inner span element is dot <p/>";
$ (' #msg '). html (TXT);
});
$ (' #content '). Bind ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p> outer div element is clicked <p/>";
$ (' #msg '). html (TXT);
});
$ ("body"). Bind ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p>body element is clicked <p/>";
$ (' #msg '). html (TXT);
});
})
</script>
When you click Span, it triggers the div and body click events. Clicking on the div triggers the body's Click event.
How do you prevent this bubbling event from happening? Modified as follows:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
$ (' span '). BIND ("click", Function (event) {
var txt = $ (' #msg '). HTML () + "<p> inner span element is clicked <p/>";
$ (' #msg '). html (TXT);
Event.stoppropagation (); Block event bubbling
});
$ (' #content '). Bind ("click", Function (event) {
var txt = $ (' #msg '). HTML () + "<p> outer div element is clicked <p/>";
$ (' #msg '). html (TXT);
Event.stoppropagation (); Block event bubbling
});
$ ("body"). Bind ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p>body element is clicked <p/>";
$ (' #msg '). html (TXT);
});
})
</script>
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. Here is the case:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
$ ("#sub"). Bind ("click", Function (event) {
var username = $ ("#username"). Val (); Gets the value of the element, and the Val () method returns or sets the value of the selected element.
if (username== "") {//Determine whether the value is empty
$ ("#msg"). HTML ("<p> text box value cannot be empty .</p>"); Hint Information
Event.preventdefault (); Block default behavior (form submission)
}
})
})
</script>
HTML section:
Copy Code code as follows:
<body>
<form action= "test.html" >
User name: <input type= "text" id= "username"/><br/>
<input type= "Submit" value= "submitted" id= "sub"/>
</form>
<div id= "MSG" ></div>
</body>
Another way to prevent the default behavior is to return false. Effect. The code is as follows:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
$ ("#sub"). Bind ("click", Function (event) {
var username = $ ("#username"). Val ();
if (username = = "") {
$ ("#msg"). HTML ("<p> text box value cannot be empty .</p>");
return false;
}
})
})
</script>
Similarly, the bubbling event above can also be handled by return false.
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
$ (' span '). BIND ("click", Function (event) {
var txt = $ (' #msg '). HTML () + "<p> inner span element is dot <p/>";
$ (' #msg '). html (TXT);
return false;
});
$ (' #content '). Bind ("click", Function (event) {
var txt = $ (' #msg '). HTML () + "<p> outer div element is dot <p/>";
$ (' #msg '). html (TXT);
return false;
});
$ ("body"). Bind ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p>body element is dot <p/>";
$ (' #msg '). html (TXT);
});
})
</script>
jquery has a bubbling feature for event firings of the DOM. Sometimes this feature can be used to reduce repetitive code, but sometimes we don't want the event to bubble. This is the time to stop jquery.event bubbling.
