Bubble event is to click on the child node, will trigger the parent node up, ancestor node Click event.
Here is the HTML code section:
<body> <div id= "content" > outer div elements <span> inner span element </span> Outer div element </div> <div id= "msg" ></div> </body>
The corresponding jquery code is as follows:
<script type= "Text/javascript" >
$ (function () {
/) Bind Click event
$ (' span ') for a SPAN element. Bind ("click", function () {
var txt = $ (' #msg '). HTML () + "<p> inner span element is clicked .<p/>";//Get HTML information
$ (' #msg '). HTML (TXT) ;//Set HTML information
});
Binds the Click event
$ (' #content ') for the DIV element. bind ("click", Function () {
var txt = $ (' #msg '). HTML () + <p> The outer div element is clicked .<p/> ";
$ (' #msg '). html (TXT);
});
Bind Click event $ ("body") for the BODY element
. 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:
<script type= "Text/javascript" >
$ (function () {
/) Bind Click event
$ (' span ') for a SPAN element. Bind ("click", function (event) {
var txt = $ (' #msg '). HTML () + "<p> inner span element is clicked .<p/>";
$ (' #msg '). html (TXT);
Event.stoppropagation (); Block event bubbling
});
Binds the Click event
$ (' #content ') for the DIV element. bind ("click", Function (event) {
var txt = $ (' #msg '). HTML () + <p> The outer div element is clicked .<p/> ";
$ (' #msg '). html (TXT);
Event.stoppropagation (); Block event bubbling
});
Bind Click event $ ("body") for the BODY element
. Bind ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p>body element is clicked. <p/> ";
$ (' #msg '). html (TXT);
});
</script>
Event.stoppropagation (); Block event bubbling
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).
Here is the case:
<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== "") { //Determines whether the value is empty
$ ("#msg"). HTML ("<p> text box value cannot be empty .</p>");//hint Info
Event.preventdefault (); Block default behavior (form submission)}})
</script>
HTML section:
<body> <form action= "test.html" > username: <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:
<script type= "Text/javascript" >
$ (function () {
$ ("#sub"). Bind ("click", Function (event) {
var Username = $ ("#username"). Val (); Gets the value of the element
if (username== "") { //Determines whether the value is empty
$ ("#msg"). HTML ("<p> text box value cannot be empty .</p>");//hint Info
return false;
}}) </script>
Similarly, the bubbling event above can also be handled by return false.
<script type= "Text/javascript" >
$ (function () {
/) Bind Click event
$ (' span ') for a SPAN element. Bind ("click", function (event) {
var txt = $ (' #msg '). HTML () + "<p> inner span element is clicked .<p/>";
$ (' #msg '). html (TXT);
return false;
});
Binds the Click event
$ (' #content ') for the DIV element. bind ("click", Function (event) {
var txt = $ (' #msg '). HTML () + <p> The outer div element is clicked .<p/> ";
$ (' #msg '). html (TXT);
return false;
});
Bind Click event $ ("body") for the BODY element
. Bind ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p>body element is clicked. <p/> ";
$ (' #msg '). html (TXT);
});
</script>
The above in-depth understanding of jquery's prevention bubble event is a small series to share all the content of everyone, hope to give you a reference, but also hope that we support the 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
