阻止事件冒泡的三种手段
1、return false：可以阻止默认事件和冒泡事件
2、event.stopPropagation/IE下event.cancelBubble = true;：可以阻止冒泡事件但是允许默认事件
3、event.preventDefault();/IE下event.returnValue = false：可以阻止默认事件但是允许冒泡事件
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>jQuery阻止冒泡</title> 6 <style> 7 .div1{ 8 width: 140px; 9 border: 1px solid blue; 10 } 11 .div2{ 12 width: 100px; 13 height: 100px; 14 margin: 20px; 15 border: 1px solid red; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="div1"> 21 <div class="div2"> 22 点我呀！！！！ 23 </div> 24 </div> 25 26 <a href="http:www.baidu.com" id="a1">百度</a> 27 28 <!-- <script src="../js/jquery/jquery.min.js"></script> --> 29 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> 30 <script> 31 $('.div1').bind('click',function(){ 32 alert("div1"); 33 }); 34 35 $('.div2').bind('click',function(event){ 36 alert("div2"); 37 //return false;//也可以通过return false 阻止冒泡 38 39 /*if(window.event && event.cancelBubble){//IE下阻止冒泡 40 event.cancelBubble = true; 41 }else{ 42 event.stopPropagation(); 43 }*/ 44 if(event && event.stopPropagation){ //W3C 45 event.stopPropagation(); 46 }else{ //IE下阻止冒泡 47 window.event.cancelBubble = true; 48 } 49 50 }); 51 $('#a1').bind('click',function(event){ 52 if(window.event){//IE下阻止默认事件 53 event.returnValue = false; 54 }else{ //W3C 55 event.preventDefault(); 56 } 57 58 alert("我是链接"); 59 // return false;//如果不添加任何阻止事件，先弹框，后跳转，我们可以通过return false阻止跳转 60 }); 61 62 </script> 63 </body> 64 </html>