冒泡与阻止冒泡事件
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <style type="text/css"> 6 .redBorder { 7 border: 2px solid red; 8 } 9 10 .test1 { 11 width: 240px; 12 height: 150px; 13 background-color: #3493B9; 14 text-align: center; 15 padding: 3px 0px; 16 } 17 18 .test2 { 19 width: 160px; 20 height: 100px; 21 background-color: #47BAE7; 22 text-align: center; 23 line-height: 20px; 24 margin: 10px auto; 25 } 26 27 span { 28 width: 100px; 29 height: 35px; 30 background-color: #fff; 31 padding: 20px 20px 20px 20px; 32 } 33 34 body { 35 font-size: 12px; 36 } 37 </style> 38 <title>冒泡事件</title> 39 </head> 40 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 41 <script type="text/javascript"> 42 $(document).ready(function() { 43 $(".test1").mouseover(function(event) { 44 $(".test1").addClass("redBorder"); 45 //event.stopPropagation(); //阻止事件冒泡 46 }); 47 $(".test1").mouseout(function(event) { 48 $(".test1").removeClass("redBorder"); 49 }); 50 $(".test2").mouseover(function(event) { 51 $(".test2").addClass("redBorder"); 52 //event.stopPropagation(); //阻止事件冒泡 53 }); 54 $(".test2").mouseout(function(event) { 55 $(".test2").removeClass("redBorder"); 56 }); 57 $("span").mouseover(function(event) { 58 $("span").addClass("redBorder"); 59 //event.stopPropagation(); //阻止事件冒泡 60 }); 61 $("span").mouseout(function(event) { 62 $("span").removeClass("redBorder"); 63 }); 64 65 }); 66 </script> 67 <body> 68 <div class="test1"> 69 <b>div元素</b> 70 <p class="test2"> 71 <b>p元素</b><br/><br/> 72 <span><b>span元素</b></span> 73 </p> 74 </div> 75 </body> 76 </html>