Home > Others

Example 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 ＞

JQuery. Event provides a very simple method to prevent event bubbles: Event. stopPropagation ();

 
 

The code is as follows: Copy code
$ ("P"). click (function (event ){
Event. stopPropagation (); // do something
})
 

However, this method does not work for events bound with live. You need a simpler method to prevent event bubbles: return false;

 

The code is as follows: Copy code
$ ("P"). live ("click", function (){
$ (This). after ("Another paragraph! ");
Return false;
});

However, the two methods are different. Return false not only prevents the event from bubbling up, but also blocks the event itself. Event. stopPropagation () only prevents the event from bubbling up, not the event itself.

Use Cases: Lenovo boxes for Google and Baidu. When a drop-down list is displayed, you need to keep the cursor in the text input box when you press the mouse in the drop-down list area.


Sample test code: when the text input box obtains the focus, event. stopPropagation () is used in the mousedown event of div1. In code, when you click the red area, the cursor in the text input box is lost. When return false is used, the cursor remains in the text input box when you click the red area of the code.

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">
<Html xmlns = "http://www.111cn.net/1999/xhtml" lang = "zh-CN">
<Head>
<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>
</Head>
<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; background-color: red;"> <br> 2. then click here </div>
</Div>
</Div>
</Body>
</Html>


A bubble event is a click event of the parent node and the parent node.

The following is the html code:

The code is as follows: Copy code


<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:

The code is as follows: Copy code


<Script type = "text/javascript">
$ (Function (){
// Bind a click event to the span element
$ ('Span '). bind ("click", function (){
Var txt = ('{msg'{.html () + "<p> The inner span element is clicked. <p/>"; // Obtain html information
(('{Msg'}.html (txt); // you can specify the html information.
});
// Bind a click event to the div element
$ ('# Content'). bind ("click", function (){
Var txt = ('{msg'{.html () + "<p> The Outer div element is clicked. <p/> ";
('{Msg'}.html (txt );
});
// Bind a click event to the body element
$ ("Body"). bind ("click", function (){
Var txt = ('{msg'{.html () + "<p> The body element is clicked. <p/> ";
('{Msg'}.html (txt );
});
})
</Script>

When you click span, the click event of the div and body is triggered. Clicking div triggers the body click event.

How can we prevent such a bubble event?

Modify as follows:

The code is as follows: Copy code


<Script type = "text/javascript">
$ (Function (){
// Bind a click event to the span element
$ ('Span '). bind ("click", function (event ){
Var txt = ('{msg'{.html () + "<p> The inner span element is clicked. <p/> ";
('{Msg'}.html (txt );
Event. stopPropagation (); // prevents event bubbles
});
// Bind a click event to the div element
$ ('# Content'). bind ("click", function (event ){
Var txt = ('{msg'{.html () + "<p> The Outer div element is clicked. <p/> ";
('{Msg'}.html (txt );
Event. stopPropagation (); // prevents event bubbles
});
// Bind a click event to the body element
$ ("Body"). bind ("click", function (){
Var txt = ('{msg'{.html () + "<p> The body element is clicked. <p/> ";
('{Msg'}.html (txt );
});
})
</Script>

Event. stopPropagation (); // prevents event bubbles

 

Sometimes, clicking the submit button has some default events. For example, jump to another interface. However, if the verification fails, you should not jump. At this time, you can set event. preventDefault (); // to block the default behavior (form submission ).

The following is a case:

 

The code is as follows: Copy code

<Script type = "text/javascript">
$ (Function (){
$ ("# Sub"). bind ("click", function (event ){
Var username = $ ("# username"). val (); // Obtain the element value. The val () method returns or sets the value of the selected element.
If (username = "") {// determines whether the value is null.
$ ("# Msg" cmd.html ("<p> The value of the text box cannot be blank. </p>"); // prompt information
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 = "submit" id = "sub"/>
</Form>

<Div id = "msg"> </div>
</Body>

Another way to prevent default behavior is return false. The effect is the same.

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 element value
If (username = "") {// determines whether the value is null.
$ ("# Msg" cmd.html ("<p> The value of the text box cannot be blank. </p>"); // prompt information
Return false;
         }
})
})
</Script>

Similarly, the above bubble event can also be handled through return false.

The code is as follows: Copy code


<Script type = "text/javascript">
$ (Function (){
// Bind a click event to the span element
$ ('Span '). bind ("click", function (event ){
Var txt = ('{msg'{.html () + "<p> The inner span element is clicked. <p/> ";
('{Msg'}.html (txt );
Return false;
});
// Bind a click event to the div element
$ ('# Content'). bind ("click", function (event ){
Var txt = ('{msg'{.html () + "<p> The Outer div element is clicked. <p/> ";
('{Msg'}.html (txt );
Return false;
});
// Bind a click event to the body element
$ ("Body"). bind ("click", function (){
Var txt = ('{msg'{.html () + "<p> The body element is clicked. <p/> ";
('{Msg'}.html (txt );
});
})
</Script>

We can see that:

1. event. stopPropagation ();
During event processing, the event bubble is blocked, but the default behavior is not blocked (it executes the jump of the hyperlink)
2. returnfalse;
During Event Processing, event bubbling is blocked, and default behavior is also blocked (for example, it did not execute a hyperlink jump just now)
There is also a bubble related:
3. event. preventDefault ();
If you place it in the click event of the header A tag, click "click me ".
It will pop up one by one: I am the innermost layer ----> I am the middle layer ----> I am the outermost layer, but did not jump to Baidu
Its role is: during event processing, the event is not blocked, but the default behavior is blocked (it only executes all the bullet boxes, but does not execute the hyperlink jump)

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 non blocking socket connect example java event calendar example php event calendar example jquery currency format example jquery delay function example jquery number format example

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