jQuery中事件冒泡问题及处理

在为一个元素添加事件时，经常会出现的一个问题就是事件冒泡。例如在div中嵌套了一个span元素，为div和span都添加了事件点击，如果点击span会导致span和div元素相继触发监听事件。顺序是从内到外。代码如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7         <title>事件冒泡演示</title>
 8         <meta name="author" content="Administrator" />
 9         <script src="script/jquery-1.12.2.js" type="text/javascript"></script>
10         <style type="text/css">
11             #content {
12                 background-color: #0000FF;
13             }
14             #msg {
15                 background-color: #FF0000;
16             }
17         </style>
18         <!-- Date: 2016-03-26 -->
19     </head>
20     <body>
21         <div id="content">
22             <p>
23                 外层div元素
24             </p>
25             <span>内层span元素</span>
26             <p>
27                 外层div元素
28             </p>
29         </div>
30         <div id="msg"></div>
31         <script type="text/javascript">
32             $(function() {
33                 //对span元素添加事件
34                 $("#content span").bind("click", function() {
35                     var text = $("#msg").html()+"<p>内层span元素被点击！</p>";
36                     $("#msg").html(text);
37                 });
38                 //对
39                 $("#content").bind("click", function() {
40                     var text = $("#msg").html()+"<p>外层div元素被点击！</p>";
41                     $("#msg").html(text);
42                 });
43                 
44                 $("body").bind("click", function() {
45                     var text = $("#msg").html()+"<p>body元素被点击！</p>";
46                     $("#msg").html(text);
47                 });
48             });
49         </script>
50     </body>
51 </html>

为了更好地解决这个问题，我们为事件中的function传入一个参数event，并且调用stopPropagation()方法

下面演示：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7         <title>事件冒泡演示</title>
 8         <meta name="author" content="Administrator" />
 9         <script src="script/jquery-1.12.2.js" type="text/javascript"></script>
10         <style type="text/css">
11             #content {
12                 background-color: #0000FF;
13             }
14             #msg {
15                 background-color: #FF0000;
16             }
17         </style>
18         <!-- Date: 2016-03-26 -->
19     </head>
20     <body>
21         <div id="content">
22             <p>
23                 外层div元素
24             </p>
25             <span>内层span元素</span>
26             <p>
27                 外层div元素
28             </p>
29         </div>
30         <div id="msg"></div>
31         <script type="text/javascript">
32             $(function() {
33                 //对span元素添加事件
34                 $("#content span").bind("click", function(event) {
35                     var text = $("#msg").html()+"<p>内层span元素被点击！</p>";
36                     $("#msg").html(text);
37                     event.stopPropagation();
38                 });
39                 //对
40                 $("#content").bind("click", function(event) {
41                     var text = $("#msg").html()+"<p>外层div元素被点击！</p>";
42                     $("#msg").html(text);
43                     event.stopPropagation();
44                 });
45                 
46                 $("body").bind("click", function(event) {
47                     var text = $("#msg").html()+"<p>body元素被点击！</p>";
48                     $("#msg").html(text);
49                     event.stopPropagation();
50                 });
51             });
52         </script>
53     </body>
54 </html>