Home > Developer > Web Develop

Examples of jquery blocking event bubbling

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Here are some examples of a jquery blocking event bubbling, and we know that jquery provides two ways to block event bubbling, but we simply use it to do some applications that may not be in-depth or not understood, and the following is a more detailed approach, with interested friends to enter the reference.

Jquery.event provides a very simple way to prevent event bubbling: event.stoppropagation ();

The code is as follows Copy Code
$ ("P"). Click (Function (event) {
Event.stoppropagation (); Do something
})

However, this method has no effect on events that use live bindings and requires an easier way to prevent events from bubbling: return false;

The code is as follows Copy Code
$ ("P"). Live ("Click", Function () {
$ (this). After ("another paragraph!");
return false;
});

But there is a difference between the two ways. Return false not only prevents the event from bubbling up, but also blocks the event itself. Event.stoppropagation () Only blocks events from bubbling up, not blocking the event itself.

Scene application: Google and Baidu Lenovo box, when the drop-down list, the user in the drop-down list area when the mouse is pressed to keep the cursor remains in the text input box.


Sample test code: When the text input box takes focus, event.stoppropagation () is used in the Div1 MouseDown event; Code, we mouse click on the red area after the text input box cursor loses. And when we use return false; Code, the mouse click in the red area of the cursor still stays in the text input box.

The code is as follows Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "Content-language" content= "ZH-CN"/>

<title></title>
<script language= "JavaScript" type= "Text/javascript" src= "Jquery-1.3.2.min.js" ></script>
<script>
$ (document). Ready (function () {
$ ("#div1"). MouseDown (function (event) {
Event.stoppropagation ();
return false;
});
$ ("#div2"). MouseDown (function (event) {
Alert ("Trigger MouseDown event of Rootdiv");
});
});
</script>
<body>
<div id= "Rootdiv" style= "position:relative;left:400px;top:200px;" >
<div>1. Click the input box to get the focus of the input box:</div>
<input id= "input1" style= "width:250px;" type= "text" ></input>
<div id= "Div2" >
<div id= "Div1" style= "width:200px;height:200px;" ><br><br>2. Then click here </div>
</div>
</div>
</body>


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:

The code is as follows Copy Code


<body>
<div id= "Content" >
Outer DIV Element
<span> Inner span elements </span>
Outer DIV Element
</div>

<div id= "MSG" ></div>
</body>

The corresponding jquery code is as follows:

The code is as follows Copy Code


<script type= "Text/javascript" >
$ (function () {
Binding 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
});
Binding 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 to 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, 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:

The code is as follows Copy Code


<script type= "Text/javascript" >
$ (function () {
Binding 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
});
Binding 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 to 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. 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:

The code is as follows Copy Code

<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== "") {//Judgment value is empty
$ ("#msg"). HTML ("The value of the <p> text box cannot be null .</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" value= "Commit" 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:

The code is as follows Copy Code


<script type= "Text/javascript" >
$ (function () {
$ ("#sub"). Bind ("click", Function (event) {
var username = $ ("#username"). Val (); Get the value of an element
if (username== "") {//Judgment value is empty
$ ("#msg"). HTML ("The value of the <p> text box cannot be null .</p>"); Prompt information
return false;
}
})
})
</script>

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

The code is as follows Copy Code


<script type= "Text/javascript" >
$ (function () {
Binding 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;
});
Binding 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 to the BODY element
$ ("body"). Bind ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p>body element is clicked .<p/>";
$ (' #msg '). html (TXT);
});
})
</script>

From this we can see:

1.event.stoppropagation ();
Event bubbling is blocked during event processing, but does not halt the default behavior (it performs a hyperlink jump)
2.returnfalse;
Event bubbling is blocked during event processing, and the default behavior is also blocked (for example, a jump that did not perform a hyperlink just now)
There is also a bubbling-related:
3.event.preventdefault ();
If you put it in the Click event of the head a tag, click "Click Me".
Will find it pop up in turn: I am the innermost----> I am the middle tier----> I am the outermost, but finally did not jump to Baidu
Its role is: During event processing, do not halt the event bubbling, but the default behavior (it only executes all the bullets, but did not perform a hyperlink jump)

Examples of jquery blocking event bubbling

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
event bubbling vs capturing jquery animate examples jquery menu examples jquery examples with source code opposite of append jquery star rating in jquery with examples jquery tutorial for beginners with examples pdf

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More