e.preventDefault() e.stopPropagation() return false 三者的区别

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css" media="screen">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         html,body{
12              100%;
13             height: 100%;
14         }
15         
16         .flex{
17             display: flex;
18             justify-content: center;
19             align-items: center;
20         }
21         .box{
22              800px;
23             height: 500px;
24             border: 2px solid #ccc;
25         }
26         .box>div{
27              80%;
28             height: 80%;
29             border: 1px solid #ccc;
30         }
31     </style>
32 </head>
33 <body class="flex">
34     <div class="box flex">
35         <div class="flex">
36             <a href="http:www.baidu.com">百度</a>
37         </div>
38     </div>
39     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
40     <script type="text/javascript">
41         $(function(){
42             $(".box").click(function(){
43                 alert(111)
44             })
45             $(".box>div").click(function(){
46                 alert(222)
47             })
48             $(".box>div>a").click(function(e){
49                 // e.stopPropagation()
50                 e.preventDefault()
51                 alert(333)
52                 // return false;
53             })
54         })
55     </script>
56 </body>
57 </html>

这是一个很普通的例子，但是包含了很多知识，下面是别人的一个总结：

写的挺好的，自己也可以再总结一下：

e.preventDefault();是阻止事件的默认行为，比如表单的提交，之前使用到的也就是阻止表单的提交，今天又学到，a标签的链接跳转也是一个事件的默认行为，可以阻止掉

e.stopPropagation();是阻止事件冒泡，但是不会阻止事件的默认行为，点击之后不会有冒泡，但是会有跳转

return false;同时阻止事件冒泡与事件的默认行为，很适用。

突然想起来之前在面试过程中，一个面试官问我的一个问题：有没有适用过冒泡来实现一些需求，当时很懵逼，一般的冒泡都是直接静止掉了，还能利用起来，很神奇，要学的东西还有很多啊