1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>事件冒泡与阻止冒泡</title>
6 <script src="js/jquery.min.js" type="text/javascript"></script>
7 </head>
8 <body>
9 <script type="text/javascript">
10 $(function () {
11 $("div li").click(function (e) {
12 alert("我是li");
13 })
14 $("div ul").click(function (e) { //这个e其实就是event 是一个事件的对象
15 alert("我是ul");
16 e.stopPropagation(); //e.stopPropagation();就是阻止冒泡，如果不写这句，在弹出 “我是li”后就会弹出“我是ul”，然后就会弹出“我是div”。在这里添加了e.stopPropagation();之后，“我是div”就不会弹出来了。因为已经被阻止了。其实这句也可也用 return false来替代
17 })
18 $("div").click(function (e) {
19 alert("我是div");
20 })
21 })
22 </script>
23 <div>
24 <ul>
25 <!-- li在ul里，ul在div中，只要点击了li，也就是点击了ul,也就是点击了div。在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的冒泡，而阻止冒泡的方式就是调用 事件的对象来调用stopPropagation()方法。这个事件的对象就是函数的参数 e 这个e的名字可以随便取-->
26 <li>请点击我</li>
27 </ul>
28 </div>
29 </body>
30 </html>