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.
<body><div id= "content" > outer div element <span> inner span element </span> Outer div element </div> <div id= "MSG" ></div></body>
<script type="Text/javascript">$ (function () {//binding The Click event for a SPAN element$('span'). Bind ("Click", function () {varTXT = $ ('#msg'). HTML () +"<p> inner span element is clicked .<p/>";//Get HTML Information$('#msg'). HTML (TXT);//Set HTML information }); //binding The Click event for a DIV element$('#content'). Bind ("Click", function () {varTXT = $ ('#msg'). HTML () +"<p> outer div element is clicked .<p/>"; $('#msg'). html (TXT); }); //bind the Click event to the BODY element$("Body"). Bind ("Click", function () {varTXT = $ ('#msg'). 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 () {//binding The Click event for a SPAN element$('span'). Bind ("Click", Function (Event){ varTXT = $ ('#msg'). HTML () +"<p> inner span element is clicked .<p/>"; $('#msg'). html (TXT); Event. Stoppropagation ();//Block Event bubbling }); //binding The Click event for a DIV element$('#content'). Bind ("Click", Function (Event){ varTXT = $ ('#msg'). HTML () +"<p> outer div element is clicked .<p/>"; $('#msg'). html (TXT); Event. Stoppropagation ();//Block Event bubbling }); //bind the Click event to the BODY element$("Body"). Bind ("Click", function () {varTXT = $ ('#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. 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).
<script type= "Text/javascript" >$ ( function " #sub "). Bind (" click ", 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>"); // event.preventdefault (); // block default behavior (form submission) </script> <Body><formAction= "Test.html">User name:<inputtype= "text"ID= "username" /><BR/><inputtype= "Submit"value= "Submit"ID= "Sub"/></form><DivID= "MSG"></Div></Body>
There is also a way to prevent the default behavior is to return false. The same effect.
1<script type= "Text/javascript" >2$(function(){3$ ("#sub"). Bind ("click",function(event) {4 varUsername = $ ("#username"). Val ();//get the value of an element5 if(username== "") {//determine if the value is empty6$ ("#msg"). HTML ("The value of the <p> text box cannot be null .</p>");//Prompt Information7 return false;8 }9 })Ten }) One</script>
Similarly, the above bubbling event can also be handled by return false.
<script type= "Text/javascript" >$(function(){ //binding The Click event for a SPAN element$ (' span '). BIND ("click",function(event) {varTXT = $ (' #msg '). HTML () + "<p> inner span element is clicked .<p/>"; $(' #msg '). html (TXT); return false; }); //binding The Click event for a DIV element$ (' #content '). Bind ("click",function(event) {varTXT = $ (' #msg '). HTML () + "<p> outer div element is clicked .<p/>"; $(' #msg '). html (TXT); return false; }); //bind the Click event to the BODY element$ ("body"). Bind ("click",function(){ varTXT = $ (' #msg '). HTML () + "<p>body element clicked .<p/>"; $(' #msg '). html (TXT); });})</script>
Original address: http://www.cnblogs.com/jiqing9006/archive/2012/09/11/2679831.html
jquery Blocks bubbling events: $ (' span '). BIND ("click", Function (event) {event.stoppropagation ();}) (Useful source)
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
