冒泡与阻止冒泡事件 

 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>

 

posted @ 2013-09-02 16:18  最是那一杯红酒  阅读(234)  评论(0)    收藏  举报