在为一个元素添加事件时，经常会出现的一个问题就是事件冒泡。例如在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>