<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> #wrap{ width:500px; height:400px; pink; < /span> } #center{ width:300px; height:300px; red; < /span> } #inner{ width:100px; height:100px; background:#fff; } </style> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#wrap").click(function(){ alert("我是最外层"); }); $("#center").click(function(aaa){//传一个参数，这个参数不仅可以是event，也可以是其他的，参数可以自定义 alert("我是中间层"); aaa.stopPropagation();//给这个参数一个stopPropagation()方法，这样就可以阻止冒泡了 }); $("#inner").click(function(){ alert("我是最里层"); return false;//直接用return false代替aaa.stopPropagation()也可以阻止冒泡 }) }) </script> </head> <body> <div id="wrap">我是最外层 <div id="center">我是中间层 <div id="inner">我是最里层</div> </div> </div> </body> </html>冒泡：当一个元素里面包着其他元素，里面和外面的元素都给点击事件，点击里面的元素时同时会触发外面的元素，造成意外的效果。冒泡就是因为事件会按照DOM的层次结构像水泡一样不断向上直至顶端。 解决停止冒泡的方法一：1.给每一个元素一个事件对象，event
2.用stopPropagation()方法停止冒泡。解决停止冒泡方法二：return false