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.
Here is the HTML code section:
<body><div id= "content" > outer div element <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 () { //For span element binding Click event $ (' span '). BIND ("click", Function () { var txt = $ (' #msg '). HTML () + "<p> inner span element is clicked .<p/>";//Get HTML information $ (' #msg '). html (TXT);//Set HTML information }); Bind the Click event $ (' #content ') for the DIV element. bind ("click", Function () { var txt = $ (' #msg '). The HTML () + "<p> outer div element is clicked. <p/> "; $ (' #msg '). html (TXT); }); Binds the Click event $ ("body") to the BODY element. Bind ("click", Function () { var txt = $ (' #msg '). The HTML () + "<p>body element is clicked. <p/> "; $ (' #msg '). html (TXT); }) </script>When you click Span, the div and body click events are triggered. Clicking on a div triggers the body's Click event.
How do you prevent this bubbling event from happening?
Modify the following:
<script type= "Text/javascript" >$ (function () { //For span element binding Click event $ (' span '). BIND ("click", Function ( Event) { var txt = $ (' #msg '). HTML () + "<p> inner span element is clicked .<p/>"; $ (' #msg '). html (TXT); Event.stoppropagation (); block event bubbling }); Bind 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 }); Binds the Click event $ ("body") to the BODY element. Bind ("click", Function () { var txt = $ (' #msg '). The 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. 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).
Here are the cases:
<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 null .</p>"); Hint Information event.preventdefault (); Block default behavior (form submission)} ) }) </script>HTML section:
<body><form action= "test.html" > User name: <input type= "text" id= "username"/><br/><input type= " Submit "value=" Submission "id=" sub "/></form><div id=" MSG "></div></body>
There is also a way to prevent the default behavior is to return false. The same 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 null .</p>"); Prompt message return false;}}) }) </script>Similarly, the above bubbling event can also be handled by return false.
<script type= "Text/javascript" >$ (function () { //For span element binding Click event $ (' span '). BIND ("click", Function ( Event) { var txt = $ (' #msg '). HTML () + "<p> inner span element is clicked .<p/>"; $ (' #msg '). html (TXT); return false; }); Bind 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; }); Binds the Click event $ ("body") to the BODY element. Bind ("click", Function () { var txt = $ (' #msg '). The HTML () + "<p>body element is clicked. <p/> "; $ (' #msg '). html (TXT); }) </script>jquery's prevention of bubbling events
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
