Developer test-jquery-Stop Bubbling

Take a look today at the front-end bubbling and event default events how to handle

1.event.stoppropagation () method

This is the bubbling method of blocking events, not allowing the event to spread to Documen, but the default event will still be executed, and when you drop this method, if you click on a connection, the connection will remain open.

2.event.preventdefault () method

This is the method that blocks the default event, and calling this method is that the connection will not be opened, but bubbles will occur, and bubbling will pass to the parent element of the previous layer;

3.return false;

This method is more violent, he'll be a colleague. Blocking event bubbling also blocks default events, writes this code, the connection is not opened, the event is not passed to the parent of the previous layer, and it is understood that return false is equal to the simultaneous invocation of Event.stoppropagation () and Event.preventdefault ()

4. Let's take a look at a few sets of demos, using jquery for DOM manipulation

This is the HTML code, div inside a set of a tag, connect to Baidu

[HTML]View PlainCopyprint?

1. <div class="Box1">
2. <a href="http://www.baidu.com" target="_blank"></a>
3. </div>

CSS code, a tag occupies 1/4 of the space of the parent element, the background color is red;

[HTML]View PlainCopyprint?

2. . box1{
4. height:200px;
6. width:600px;
8. margin:0 Auto;
10. }
12. . Box1 a{
14. Display:block;
16. height:50%;
18. width:50%;
20. background:red;
22. }

Here is the JS code, the first kind

[HTML]View PlainCopyprint?

1. Do not block event bubbling and default events
3. $ (". Box1"). Click (function () {
4. Console.log ("1")//Do not block event bubbling will print 1, page jump;
5. });

The second Kind

[HTML]View PlainCopyprint?

2. Stop bubbling
4. $ (". Box1 a"). Click (Function (event) {
6. Event.stoppropagation ();//will not print 1, but the page will jump;
10. });
14. $ (". Box1"). Click (function () {
16. Console.log ("1")
18. });

Third Kind

[HTML]View PlainCopy print?

1. $ (". Box1 a"). Click (Function (event) {
2. Block Default Events
3. Event.preventdefault ();//page will not jump, but will print out 1,
4. })；
6. $ (". Box1"). Click (function () {
7. Console.log ("1");
8. });

Fourth type

[HTML]View PlainCopyprint?

1. $ (". Box1"). Click (function () {
2. Console.log ("1")
3. });
4. Stop bubbling
5. $ (". Box1 a"). Click (Function (event) {
6. Event.stoppropagation ();
7. Block Default Events
8. Event.preventdefault ()//page does not jump and will not print out 1
9. })

Fifth type

[HTML]View PlainCopyprint?

1. $ (". Box1"). Click (function () {  
2.                  console.log ("1")                    
3. &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;});                                     
4. $ (". Box1 a") . Click (Function (event) {  
5.           The        return false;  //page does not jump, nor does it print 1, equals both event.stoppropagation () and Event.preventdefault ()    are called;
6.   

Developer test-jquery-block bubbling