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 () {//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).
Here are the cases:
<script type="Text/javascript">$ (function () {$ ("#sub"). Bind ("Click", Function (Event){ varUsername = $ ("#username"). Val ();//gets the value of the element, and the Val () method returns or sets the value of the selected element. if(username==""){//determine if the value is empty$("#msg"). HTML ("the value of the <p> text box cannot be empty .</p>");//Prompt 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 " Span style= "COLOR: #800000" > " value=" submit " 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){ varUsername = $ ("#username"). Val ();//get the value of an element if(username==""){//determine if the value is empty$("#msg"). HTML ("the value of the <p> text box cannot be empty .</p>");//Prompt Information return false; } })})</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 is clicked .<p/>"; $('#msg'). html (TXT); });})</script>
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Block event bubbling JS jquery
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
