标签：
阻止事件冒泡的三种手段
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://libs.baidu.com/jquery/2.0.0/jquery.js"></script> 30 <script> 31 $(‘.div1‘).bind(‘click‘,function(){ 32 alert("div1"); 33 }); 34 $(‘.div2‘).bind(‘click‘,function(){ 35 alert("div2"); 36 // return false;//也可以通过return false 阻止冒泡 37 if(window.event){//IE下阻止冒泡 38 event.cancelBubble = true; 39 }else{ 40 event.stopPropagation(); 41 } 42 }); 43 $(‘#a1‘).bind(‘click‘,function(){ 44 if(window.event){//IE下阻止默认事件 45 event.returnValue = false; 46 }else{ 47 event.preventDefault(); 48 } 49 alert("我是链接"); 50 //return false;//如果不添加任何阻止事件，先弹框，后跳转，我们可以通过return false阻止跳转 51 }); 52 53 </script> 54 </body> 55 </html>
标签：
原文地址：http://www.cnblogs.com/double405/p/5118350.html
