bubbling and default behavior
If multiple elements overlap in the page, and the overlapping elements are bound to the same event, a bubbling problem occurs.
example, the HTML code is as follows:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Event Object</title> <Scripttype= "Text/javascript"src= "Jquery-1.12.3.js"></Script> <Scripttype= "Text/javascript"src= "Demo.js"></Script> <Linkrel= "stylesheet"type= "Text/css"href= "Style.css" /></Head><Body> <Divstyle= "width:200px; height:200px; Background-color: #ccc;"> <inputtype= "button"value= "button" /> </Div></Body></HTML>
three different element triggering events:
Note: When we click on the document, only the document event is triggered, and when we click on the div layer, we trigger the DIV and document two, and when we click the button, the button, Div, and document are triggered. The order of triggering is from small to large range.
This is the so-called bubbling phenomenon, one layer at a level upward.
jquery provides a way for an event object: Event.stoppropagation (); When this method is set to the event that needs to be triggered, the bubbling behavior of all the upper layers is canceled.
Block bubbling:
// bubbles and Blocks bubble $ ("input"). Click (function(e) { e.stoppropagation (); // No bubbles Alert ("button is triggered! ");}); $ ("div"). Click (function(e) { e.stoppropagation (); // No bubbles Alert ("div layer is triggered!") ");}); $ (document). Click(function() { alert ("Doc page" is triggered!) ");});The elements in the Web page will have their own default behavior at the time of operation. For example: Right-click the text box input area, the system menu will pop up, click the hyperlink will jump to the specified page, click the Submit button will submit the data.
such as HTML (partial) code:
<Divstyle= "width:200px; height:200px; Background-color: #ccc;"> <inputtype= "button"value= "button" /> <ahref= "Http://www.ycku.com"Target= "_blank">Ycku.com</a></Div>
jquery Code:
$ ("a"). Click (function(e) { // block default behavior alert ("ycku.com");});Prevent submission of form jumps:
The HTML (part) code is as follows:
<formAction= "123.html"><Divstyle= "width:200px; height:200px; Background-color: #ccc;"> <inputtype= "button"value= "button" /> <ahref= "Http://www.ycku.com"Target= "_blank">Ycku.com</a></Div></form>
Mode ① prohibit submission of form jumps:
// prohibits the form from submitting $ ("input"). Click (function(e) {// block default behavior alert ("form submission" );});Mode ② prohibit submission of form jumps:
// prohibit form submission $ ("form"). Submit (function(e) { e.preventdefault ();});Note: If you want the above hyperlink to block the default behavior at the same time and suppress the bubbling behavior, you can write the two methods simultaneously: Event.stoppropagation () and Event.preventdefault (). If these two methods need to be enabled at the same time, there is a shorthand scheme instead, which is to return false directly.
// prevents bubbling and disables the default behavior of $ ("a"). Click (function(e) { e.preventdefault (); e.stoppropagation (); Alert ("ycku.com");});Or
$ ("a"). Click (function(e) { alert ("ycku.com"); returnfalse ;});Some ways to bubble and default behavior
| Method name | Describe |
| Preventdefault () | Cancels the default behavior of an element |
| Isdefaultprevented () | Determine if the Preventdefault () method is called |
| Stoppropagation () | Cancel Event Bubbling |
| Ispropagationstopped () | Determine if the Stoppropagation () method is called |
| Stopimmediatepropagation () | Cancels event bubbling and cancels subsequent event handlers for the event |
| Isimmediatepropagationstopped () | Determine if the Stopimmediatepropagation () method is called |
The HTML code is as follows:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Event Object</title> <Scripttype= "Text/javascript"src= "Jquery-1.12.3.js"></Script> <Scripttype= "Text/javascript"src= "Demo.js"></Script> <Linkrel= "stylesheet"type= "Text/css"href= "Style.css" /></Head><Body> <formAction= "123.html"> <Divstyle= "width:200px; height:200px; Background-color: #ccc;"> <inputtype= "Submit"value= "button" /> <ahref= "Http://www.ycku.com"Target= "_blank">Ycku.com</a> </Div> </form></Body></HTML>
The jquery code is as follows:
$ (document). Click (function() { alert ("document");}); $ ("div"). Click (function(e) { alert ("div");}); $ ("a"). Click (function(e) { e.preventdefault (); E.stoppropagation (); // true // true});Can also be judged like this:
$ ("a"). Click (function(e) { e.preventdefault (); E.stoppropagation ();}); $ ("a"). Click (function(e) { //true //true });Cancel the bubbling and cancel the subsequent event handler function:
$ ("a"). Click (function(e) { e.stopimmediatepropagation (); // true Alert ("A1");}); $ ("a"). Click (function(e) { alert ("A2");}); $ ("div"). Click (function(e) { alert ("div");}); $ (document). Click (function() { alert ("document");});Event Object (ii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
