jQuery中阻止冒泡-原创手记-慕课网

<!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