Deep understanding of jquery preventing bubbling events _jquery

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: