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;同时阻止事件冒泡与事件的默认行为，很适用。
突然想起来之前在面试过程中，一个面试官问我的一个问题：有没有适用过冒泡来实现一些需求，当时很懵逼，一般的冒泡都是直接静止掉了，还能利用起来，很神奇，要学的东西还有很多啊