How jquery prevents this bubbling event from happening _jquery

Source: Internet
Author: User

Bubble event is to click on the child node, the event will be passed up, and finally triggered the parent node, ancestor node Click event.

HTML code section:

Copy Code code as follows:

<body>
<div id= "Content" >
Outer DIV Element
<span> Inner SPAN element </span>
Outer DIV Element
</div>
<div id= "MSG" ></div>
</body>

The jquery code is as follows:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ (' span '). BIND ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p> inner span element is dot <p/>";
$ (' #msg '). html (TXT);
});
$ (' #content '). Bind ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p> outer div element is clicked <p/>";
$ (' #msg '). html (TXT);
});
$ ("body"). 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:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ (' span '). BIND ("click", Function (event) {
var txt = $ (' #msg '). HTML () + "<p> inner span element is clicked <p/>";
$ (' #msg '). html (TXT);
Event.stoppropagation (); Block event bubbling
});
$ (' #content '). Bind ("click", Function (event) {
var txt = $ (' #msg '). HTML () + "<p> outer div element is clicked <p/>";
$ (' #msg '). html (TXT);
Event.stoppropagation (); Block event bubbling
});
$ ("body"). Bind ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p>body element is clicked <p/>";
$ (' #msg '). html (TXT);
});
})
</script>

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. Here is the case:

Copy Code code as follows:

<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== "") {//Determine whether the value is empty
$ ("#msg"). HTML ("<p> text box value cannot be empty .</p>"); Hint Information
Event.preventdefault (); Block default behavior (form submission)
}
})
})
</script>

HTML section:

Copy Code code as follows:

<body>
<form action= "test.html" >
User name: <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:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("#sub"). Bind ("click", Function (event) {
var username = $ ("#username"). Val ();
if (username = = "") {
$ ("#msg"). HTML ("<p> text box value cannot be empty .</p>");
return false;
}
})
})
</script>

Similarly, the bubbling event above can also be handled by return false.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ (' span '). BIND ("click", Function (event) {
var txt = $ (' #msg '). HTML () + "<p> inner span element is dot <p/>";
$ (' #msg '). html (TXT);
return false;
});
$ (' #content '). Bind ("click", Function (event) {
var txt = $ (' #msg '). HTML () + "<p> outer div element is dot <p/>";
$ (' #msg '). html (TXT);
return false;
});
$ ("body"). Bind ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p>body element is dot <p/>";
$ (' #msg '). html (TXT);
});
})
</script>

jquery has a bubbling feature for event firings of the DOM. Sometimes this feature can be used to reduce repetitive code, but sometimes we don't want the event to bubble. This is the time to stop jquery.event bubbling.

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.