Prevent event bubbling, prevent default event, the difference between event.stopPropagation() and event.preventDefault(), return false

Today, let's take a look at how the front-end bubbling and event default events are handled

1. event.stopPropagation() method

This is a method to prevent the event from bubbling, preventing the event from spreading to the document, but the default event will still be executed. When you use this method, if you clickClick on a connection, the connection will still be opened,

2. event.preventDefault() method

This is a method to prevent the default event. When this method is called, the connection will not be opened, but bubbling will occur, and the bubbling will be passed to the parent element of the previous layer;

3.return false  ；

This method is more violent. He will prevent the event from bubbling and also prevent the default event. When this code is written, the connection will not be opened, and the event will not be passed to the previous one.The parent element of the layer; it can be understood that return false is equivalent to calling event.stopPropagation() and event.preventDefault() at the same time

4. Let's take a look at a few groups of demos and use jquery for DOM manipulation

This is the html code, there is an a tag inside the div, which is connected to Baidu

[html]  view plain copy  

1. <divclass="box1">   
2.             <ahref="http://www.baidu.com"target="_blank"></a>    
3.         </div>  

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

[html]  view plain copy  

1. .box1{  
2.                 height: 200px;  
3.                 width: 600px;  
4.                 margin: 0 auto;  
5.             }  
6.             .box1a{  
7.                 display: block;  
8.                 height: 50%;  
9.                 width: 50%;  
10.                 background：red;  
11.             }  

Let's look at the js code, the first 

[html]  view plain copy  

1. //Do not prevent event bubbling and default events  
2.               
3.             $(".box1").click(function(){  
4.                 console.log("1")//If the event is not prevented from bubbling, 1 will be printed, and the page will jump;               
5.             });  

the second

[html]  view plain copy  

1. // stop bubbling  
2.             $(".box1 a").click(function(event){  
3.                 event.stopPropagation();//1 will not be printed, but the page will jump;              
4.   
5.             });  
6.               
7.             $(".box1").click(function(){  
8.                 console.log("1")                  
9. });  

the third

[html]  view plain copy  

1. $(".box1 a").click(function(event){           
2. // prevent default event  
3. event.preventDefault();//The page will not jump, but it will print 1,  
4. })；  
5.               
6. $(".box1").click(function(){  
7. console.log("1")；                 
8. });  

the fourth

[html]  view plain copy  

1. $(".box1").click(function(){  
2. console.log("1")  
3. });           
4. // stop bubbling  
5. $(".box1 a").click(function(event){  
6. event.stopPropagation();              
7. // prevent default event  
8. event.preventDefault() //The page will not jump and will not print 1  
9. })  

fifth

[html]  view plain copy  

1. $(".box1").click(function(){  
2.                 console.log("1")                  
3.             });                                   
4. $(".box1 a").click(function(event){  
5.                 return false; //The page will not jump and will not print 1, which is equivalent to calling event.stopPropagation() and event.preventDefault() at the same time  
6.   
7. });