jquery Blocks event bubbling specifically implemented _jquery

Source: Internet
Author: User

Here is the 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 corresponding jquery code is as follows:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
Bind the Click event for a SPAN element
$ (' 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 for a DIV element
$ (' #content '). Bind ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p> outer div element is clicked .<p/>";
$ (' #msg '). html (TXT);
});
Bind the Click event for the BODY element
$ ("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 () {
Bind the Click event for a SPAN element
$ (' 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 for a DIV element
$ (' #content '). Bind ("click", Function (event) {
var txt = $ (' #msg '). HTML () + "<p> outer div element is clicked .<p/>";
$ (' #msg '). html (TXT);
Event.stoppropagation (); Block event bubbling
});
Bind the Click event for the BODY element
$ ("body"). 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:

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 (); Get the value of an element
if (username== "") {//Determine whether the value is empty
$ ("#msg"). HTML ("<p> text box value cannot be empty .</p>"); Hint Information
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 () {
Bind the Click event for a SPAN element
$ (' 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 for a DIV element
$ (' #content '). Bind ("click", Function (event) {
var txt = $ (' #msg '). HTML () + "<p> outer div element is clicked .<p/>";
$ (' #msg '). html (TXT);
return false;
});
Bind the Click event for the BODY element
$ ("body"). Bind ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p>body element is clicked .<p/>";
$ (' #msg '). html (TXT);
});
})
</script>

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: