e.preventDefault() e.stopPropagation() return false 三者的區別

時間 2019-11-29

標籤 e.preventdefault preventdefault e.stoppropagation 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             width: 100%;
13             height: 100%;
14         }
15         
16         .flex{
17             display: flex;
18             justify-content: center;
19             align-items: center;
20         }
21         .box{
22             width: 800px;
23             height: 500px;
24             border: 2px solid #ccc;
25         }
26         .box>div{
27             width: 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>